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