第五步:vue-拦截器

 

 

 
先在src中创建文建夹名为‘config'，文件夹里面创建‘File.js’文建，写入一下代码 标题+地址名
 
//空集合，为拦截器准备的 
const menus = [
    { title: "用户新增", path: "/AddUser" },
    { title: "用户登录", path: "/LoginUser" },
    { title: "用户显示", path: "/ShowUser" }
]

export default {
    menus,
    userkey: 'token'
}

　

 

　　在main下写下如下拦截器代码

 

//interceptors：拦截器
axios.interceptors.request.use(x => {

  var userinfo = window.localStorage.getItem(config.userkey);
  if (userinfo) {
    var user = JSON.parse(userinfo);
    x.headers.Authorization = `Bearer ${user.userToken}`
  }
  return x;
})

axios.interceptors.response.use(x => {
  if (x.data.code != 200) {
    alert(`请求接口异常=>${x.data.message}`);
    // Vue.$message.error(x.data.message)
  }
  return x;
})