1.路由拦截
在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,否则就进入登录页面。
const routes = [
{
path: '/',
name: '/',
component: Index
},
{
path: '/repository',
name: 'repository',
meta: {
requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
},
component: Repository
},
{
path: '/login',
name: 'login',
component: Login
}
];
定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (token) { // 判断当前的token是否存在
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath} //将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
}
else {
next();
}
})
这种方式只是简单的前端路由控制,并不能阻止用户访问,假设有一种情况:当前token失效了,但是token依然保存在本地。这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。
2.http拦截器
要想统一处理所有http请求和响应,就得用上 axios 的拦截器。通过配置http response inteceptor,当后端接口返回错误状态码,让用户重新登录。
import axios from 'axios';
const service = axios.create({
baseURL: '/lll',
timeout: 20000
})
//请求头转换拦截
service.interceptors.request.use(
config => {
if (config.method == 'post' && config.data) {
config.headers = {
'Content-Type': 'multipart/form-data',
}
const formData = new FormData();
Object.keys(config.data).forEach((key) => {
formData.append(key, config.data[key]);
});
config.data = formData
}else if(config.method == 'patch' && config.data){
config.headers = {
'Content-Type': 'application/json'
}
config.method = 'post';
}else{
if (stoken) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.Authorization = `token ${store.state.token}`;
}
}
/**统一添加头 */
// config.headers={
// "X-Requested-With":"XMLHttpRequest"
// };
return config;
},
error => {
return Promise.reject(error);
}
);
//http response 拦截器
service.interceptors.response.use(
response => {
if (response.data.success) {
return response;
} else if ( response.data.status === 400) {
router.push('/login')
return response;
} else {
return response;
}
},
error => {
return Promise.reject(error)
}
)
export default service;