有木有前端大神，请教个登录拦截的问题。

[firhome]

项目用的是 vue + axios

现在情况是这样。

list.vue --> 接口所有用户都能看

detail.vue --> 接口必须登录才能看


我在 axios 里对页面请求进行了处理。

如果遇到需要登录的接口，直接跳登录页面 登录后再跳转回来。

这个流程应该没什么问题。。。。


但是用户会这么操作 。 list --> detail(请求发现未登录 跳转到登录 login) ----> 用户不想登录操作，想返回 list

就发现返回不了。 因为路由是 从 detail 到 login， 从 login 只能返回到 detail （发现未登录 又跳 login ）


请问这种情况怎么解决呢？

[RookieZoe]

vue-router 和 axios 拦截器搭配使用

[wangyzj]

router.beforeEach

[ceet]

// 页面权限
router.beforeEach((to, from, next) => {
if(to.matched.some(item => item.meta.requiresAuth)) {
// 当 token 存在证已经登录，设置登录后的请求头，否则进入登录页面
if(sessionStorage.token) {
axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
next();
} else {
next({
path: '/Login'
});
}
} else {
if(to.path == '/Register' || to.path == '/FindPwd' || to.path == '/Login') {
axios.defaults.headers['Authorization'] = '';
}
next();
}
// 响应拦截（配置请求回来的信息）
axios.interceptors.response.use(function(response) { // 处理响应数据
// 判断如果请求返回 1004 3301 4004 5501 状态码，即登录超时，清除 token 并跳回登录页
if(response.data.code == '1004' || response.data.code == '3301' || response.data.code == '5501') {
vant.Notify({
message: response.data.msg,
duration: 1000,
background: '#1989fa'
});
sessionStorage.clear();
next({
path: '/Login'
});
}
return response;
}, function(error) { // 处理响应失败
setTimeout(() => {
if(error.response.status == '404') {
vant.Notify({
message: '404 请求接口地址错误',
duration: 1000,
background: '#1989fa'
});
} else if(error.response.status == '405') {
vant.Notify({
message: '405 请求类型错误',
duration: 1000,
background: '#1989fa'
});
} else if(error.response.status == '500') {
vant.Notify({
message: error.response.data.msg,
duration: 1000,
background: 'rgb(255, 68, 68)'
});
} else if(error.response.status == '504') {
vant.Notify({
message: '504 网关错误',
duration: 1000,
background: 'rgb(255, 68, 68)'
});
} else {
vant.Notify({
message: error.response.status + ' 其他错误：' + error.response.data.msg,
duration: 1000,
background: 'rgb(255, 68, 68)'
});
}
}, 1000);
return Promise.reject(error);
});
});