借助axios的拦截器实现Vue.js中登陆状态校验的思路

在做Vue中的登陆校验时，思路应该是这样的：先确定一个路由页面是否需要登陆才能访问，如果需要，就需要用户登陆，如果不需要，用户直接可以访问。

那么，首先来说，后台系统中，不一定每一个页面都要进行登陆权限，所以我们要通过路由的meta标签对需要做校验的路由页面做好标记，在配置路由时，我们可以在meta属性中，加入是否需要登陆的字段，如果requireAuth是true，就说明这条路由需要登陆才能访问：

{
  path: '/userInfo',
  name: 'userInfo',
  meta: {
    requireAuth: true,  // 该路由项需要权限校验
  }
  component: userInfo
}, {
  path: '/userList',
  name: 'userList',    // 该路由项不需要权限校验    
  component: userInfo
}
之后，我们可以定义一个路由守卫，每次路由跳转，我们都来做一次权限校验，参考如下代码

router.beforeEach((to, from, next) => {
  if(to.meta.requireAuth) { // 如果路由项需要权限校验
    /* 
      从Vuex拿出token码，说明已登陆
     （前端的token可伪造，所以这并不是完全靠谱，后面继续说）
    */
    if (store.state.token) { 
      next() // 正常跳转页面
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  
        /* 将跳转的路由地址作为参数带给登陆页，登录成功后跳转回该页面 */
      })
    }
  } else { // 如果不需要权限校验，直接进入路由页面
      next();
  }
})
如果用户的Vuex中登陆状态（token）存在，就说明登陆了，如果没有值，就跳转去登陆页面。用户在登陆页面登陆后，要在Vuex中保存登陆状态（token）。（实际上如果做持久存储，还应该把登陆状态存在localStorage或者cookie中）

然而，单纯这么来做并不靠谱，首先，token可以用户自己伪造，其次，有可能token在前端存在，但是由于登陆时间过长， 已经超出登陆最长时效期，这时，后端中，这个token已经失效。

所以，这么做权限校验并不准确，那么接下来，我们可以在发请求的时候，通过后端的一层校验，进一步确保权限状态的准确性。

这一步，要用到axios里面的拦截器，所以以下代码建立在项目使用axios的基础上。axios的拦截器（Interceptors），默认配置（axios.defaults）还有 axios.create() 创建出的实例实际上在封装请求时非常有用，如果你没接触过，赶紧到官方文档看一下！

我们先来看，在每次请求时，我们进行如下的拦截，这么做的意思是，如果前端有token，我每次都把token给后端，后端拿到这个token后会到后端再进行一次权限校验，然后把校验结果在接口中反馈：

axios.interceptors.request.use( requestConfig => {
  if (store.state.token) {
    config.headers.Authorization = `${store.state.token}`;
  }
  return requestConfig;
}, err => {
  return Promise.reject(err);
});
然后我们再来看，对应一定要再写一个response拦截器，处理响应数据。如果后端拿到前端的token，发现token失效，我们要求后端接口返回401的返回码，这样，前端就可以这么处理了：

axios.interceptors.response.use( response => {
    return response;
  }, error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:  
          /* 
            返回 401 表示前端的token已失效
            当然，你也可以和后端也定其他的方式来表示token失效
            需要前端清除Vuex中的token，页面跳转到登陆页
          */ 
          store.commit(types.LOGOUT);
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    return Promise.reject(error.response.data) //返回接口返回的错误信息
});

借助axios的拦截器，我们不但前端做了登陆校验，而且每次请求后端接口的时候，都会携带数据让后端再次做登陆校验，这样的一个登陆校验流程就很标准了。

这篇文章写的稍微有些宽，大家看到哪里不太明白随时提问，我再展开来讲。

作者：DellLee
链接：https://www.imooc.com/article/25167?block_id=tuijian_wz
来源：慕课网

2、第二篇有关vue中axios的文章
https://segmentfault.com/a/1190000016787376

在Vue中如何使用axios请求拦截

为什么要使用请求拦截？
如果不使用请求拦截，那么对每一条请求每一个状态都要特殊处理，如果请求特殊状态有数十个，每个页面有很多请求，那么页面会变得很长很臃肿，不好维护。
下面是一个没有请求拦截的例子：

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
    //特殊错误处理，状态为10时为登录超时
    if(data.data.code === 10){
        this.$Message.error("登录已超时，请重新登录")
        this.$router.push("/login")
    //其余错误状态处理    
    }else if(data.data.code != 0){
        this.$Message.error(data.data.msg)
    //请求成功
    }else if(data.data.code === 0){
        //进行成功业务逻辑
    }
    //.......
});

main.js

//请求发送拦截，把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {

  //这个例子中data是loginName和password
  let REQUEST_DATA = request.data
  //统一进行qs模块转换
  request.data = qs.stringify(REQUEST_DATA)
  //再发送给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//请求返回拦截，把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
  //特殊错误处理，状态为10时为登录超时
  if (response.data.code === 10) {
    iView.Message.error("登录已超时，请重新登录");
    router.push("/login")
  //其余错误状态处理    
  } else if (response.data.code != 0) {
    iView.Message.error(response.data.msg)
  //请求成功
  } else if(response.data.code === 0){
    //将我们请求到的信息返回页面中请求的逻辑
    return response;
  }
 //......

}, function (error) {
  return Promise.reject(error);
});

.vue

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});