为了账号安全,请及时绑定邮箱和手机立即绑定

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

2018.04.05 00:09 9144浏览

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

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

点击查看更多内容
62人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消