Vue使用axios实现登录验证拦截及页面跳转

定义路由时添加一个自定义字段requireAuth

1
2
3
4
5
6
path: '/repository',
name: 'repository',
meta: {
requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
},
component: Repository

路由跳转前权限验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (store.state.token) { // 通过vuex state获取当前的token是否存在
next();
} else {
next({
path: '/login',
query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
} else {
next();
}
}

这种方式只是简单的前端路由控制登录拦截,并不能真正阻止用户访问需要登录权限的路由。

还有一种情况便是:当前token失效,但是token依然保存在本地。此时访问需要登录权限的路由时,实际上应该让用户重新登录。

最终需要结合 HTTP拦截器 + 后端接口返回的HTTP状态码 判断。

请求与响应拦截器

统一处理所有HTTP请求和响应,使用axios的拦截器。每次路由跳转,都先让后台验证一下token是否有效,在http头添加token,当后端接口返回 403 Unauthorized(未授权) ,让用户重新登录。

1
2
3
4
5
6
7
8
9
10
11
// http request 拦截器
axios.interceptors.request.use(
config => {
if (store.state.token) { // 判断是否存在token,如果存在,则每个http header都加上token
config.headers.Authorization = `token ${store.state.token}`;
}
return config;
},
err => {
return Promise.reject(err);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// http response 拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 403:
// 返回 403 清除token信息并跳转到登录页面
store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
break
defualt:
break
}
}
return Promise.reject(error.response.data) // 返回接口返回的错误信息
});

登出功能也就很简单,只需要把当前token清除,再跳转到首页即可。

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :