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

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

本文为摘抄笔记，非原创

原创作者：Dell 链接：https://www.imooc.com/article/25167 来源：慕课网

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

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

 1 {
 2 path: '/userInfo',
 3 name: 'userInfo',
 4 meta: {
 5     requireAuth: true,  // 该路由项需要权限校验
 6 }
 7 component: userInfo
 8 }, 
 9 {
10 path: '/userList',
11 name: 'userList',    // 该路由项不需要权限校验    
12 component: userInfo
13 }

之后，我们可以定义一个路由守卫，每次路由跳转，我们都来做一次权限校验，参考如下代码

 1 router.beforeEach((to, from, next) => {
 2   if(to.meta.requireAuth) { // 如果路由项需要权限校验
 3     /* 
 4       从Vuex拿出token码，说明已登陆
 5      （前端的token可伪造，所以这并不是完全靠谱，后面继续说）
 6     */
 7     if (store.state.token) { 
 8       next() // 正常跳转页面
 9     } else {
10       next({
11         path: '/login',
12         query: {redirect: to.fullPath}  
13         /* 将跳转的路由地址作为参数带给登陆页，登录成功后跳转回该页面 */
14       })
15     }
16   } else { // 如果不需要权限校验，直接进入路由页面
17       next();
18   }
19 })

如果用户的Vuex中登陆状态（token）存在，就说明登陆了，如果没有值，就跳转去登陆页面。用户在登陆页面登陆后，要在Vuex中保存登陆状态（token）。（实际上如果做持久存储，还应该把登陆状态存在localStorage或者cookie中）

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

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

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

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

1 axios.interceptors.request.use( requestConfig => {
2   if (store.state.token) {
3     config.headers.Authorization = `${store.state.token}`;
4   }
5   return requestConfig;
6 }, err => {
7   return Promise.reject(err);
8 });

然后我们再来看，对应一定要再写一个response拦截器，处理响应数据。如果后端拿到前端的token，发现token失效，我们要求后端接口返回401的返回码，这样，前端就可以这么处理了：

 1 axios.interceptors.response.use( response => {
 2     return response;
 3   }, error => {
 4     if (error.response) {
 5       switch (error.response.status) {
 6         case 401:  
 7           /* 
 8             返回 401 表示前端的token已失效
 9             当然，你也可以和后端也定其他的方式来表示token失效
10             需要前端清除Vuex中的token，页面跳转到登陆页
11           */ 
12           store.commit(types.LOGOUT);
13           router.replace({
14             path: 'login',
15             query: {
16               redirect: router.currentRoute.fullPath
17             }
18           })
19       }
20     }
21     return Promise.reject(error.response.data) //返回接口返回的错误信息
22 });

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