前端路由拦截和http响应拦截

问题由来

最近在制作毕业设计的时候,遇到一个问题,那就是用户的访问控制。简单点来说,就是未登录用户只能访问某些特定的页面、API。最初我的想法是用户登录后返回一个凭证,用户以后的每次http请求都带上该凭证,进行验证,只有验证成功才能继续请求。然后在每个页面进行判断,如果用户是未登录或者凭证失效,则进行相应的提示和路由跳转。刚开始的时候,这个方法是完全可行的,但是在开发过程中,随着业务逻辑变得复杂、页面增多,重复代码太多,这样的方式也许并不合适。

如何解决

首先是后端,我使用了jsonwebtoken,用户登录成功都会生成一个具有一定时效的 token,这个token会发回到客户端,并且接下来每次发起http请求,都在http头的authorization字段带上这个token。我这里使用了axios这个http请求库,只需要在拿到token后:

1
axios.defaults.headers.common.authorization = `Bearer ${token}`;

就可以了。

由于在开发过程中涉及到跨域,这里我使用CORS来解决:通过设置一系列Access-Control-Allow-*响应头进行访问控制,上面提到了在请求头的authorization字段中设置token,因此发出的请求都不是简单请求,所以注意在每次发起http请求时,就会自动发起一个OPTIONS请求。

我服务器端用的是Express框架,我们需要写一个中间件来处理每一个请求。处理逻辑为:针对每个OPTIONS请求,直接放行;对于某些请求,如果在白名单中(例如登录、注册等不需要验证的路由),放行;对于其他请求,我们拿到其携带的token,并且进行验证,如果验证通过,放行,否则结束请求,返回未授权。具体的代码如下,这里我使用jsonwebtoken这个package,用于生成token和进行token验证。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
app.use((req, res, next) => {
console.log('methods' ,req.method);
if( req.method === 'OPTIONS' ) {
console.log('option请求直接通过');
next();
}else {
// 除去某些特定的API,其余的都做token的验证
let { path } = req;
if(path === '/api/users/auth'
|| path === '/api/users/auth_vc'
|| path === '/api/users/check_id_validation'
|| path === '/api/users/regist'
|| path === '/api/users/send_reset_email'
|| path === '/api/users/reset_password'
)
{
console.log('本次请求不需要验证权限');
next();
}else {
const token = req.headers.authorization ? req.headers.authorization.split(' ')[1] : '';
req.token = token;
jwt.verify(token, KEY, (err, decoded) => {
if(err) {
res.status(401).json({ status: 3, error: '用户认证失败', data: '' })
}else {
console.log('验证权限通过');
req.decoded = decoded;
next();
}
})
}
}
})

然后是前端,我想如果能像后端拦截每个请求一样,写一个逻辑拦截所有的相应,并进行处理,信号,axios自带拦截器,我们只需要写我们的逻辑就可以了。我的想法是,拦截每一个相应,如果其状态码是401,那么久提示token失效,并且进行路由跳转。
vue-cli构建的应用为例,在main.js中,下面是实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
axios.interceptors.response.use(data => data, (error) => {
if(error.response) {
switch(error.response.status) {
case 401: {
localStorage.removeItem('token');
router.replace({
path: '/auth',
query: {redirect: router.currentRoute.fullPath}
})
}
}
}
return Promise.reject(error);
})

值得说明的是,如果我们在某个访问的过程中,token失效,我们需要跳转到登录页面,但是想登录过后再跳转回来,所以这里在进行路由跳转的时候,我设置了一个参数, redirect,表示传入当前的路径,当我们登录成功后,在跳转回来即可。

最后是路由拦截,这里我使用了vue-router,其实vue-router的路由对象提供一个钩子函数beforeEach,其会在每一次路由跳转之前,执行这个函数,我们就在这里进行路由拦截。原理很简单,使用一个标志位标明每个路由是否需要用户权限,如果需要的话,我们检查保存在本地的凭证,一般存在localStorage中,如果不含凭证就直接跳转到登录页面。

好了,找到根路由文件,添加:

router.beforeEach((to, from , next) => {
  if(to.matched.some(res => res.meta.requireAuth)) {
    if(localStorage.getItem('token')) {
      next();
    }else {
      next({
        path: '/auth',
        query: { redirect: to.fullPath }
      })
    }
  }else {
    next();
  }
})

这里要注意的是,res.meta.requireAuth是你自己在声明路由的时候自定义的。

总结

差不多,这算是一个比较好的解决方案了。但是有这样一个情况:如果用户凭证有效期是1小时,那么如果我浏览网页超过一个小时了,凭证还是保存在本地的,当我们进行路由跳转的时候,并没有验证凭证是否失效,所以还是会进行路由跳转。这里不用担心,因为进入进入了一个路由后,一旦发起http请求,token失效,http相应拦截就会生效,进而跳转到登录页面。

加油!

分享到 评论