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

不要跳到 detail 里面进行判断，在 beforeRouterEnter 里判断是否登录即可。

在跳转 detail 之前去做拦截操作呗，就是在 list 页再写一遍拦截的方法，其实可以提出来，再跳页面之前都要先执行这个方法。

在路由进入 detail 之前用 router.beforeEach 拦截

记录 detail 之前的页面链接，用户返回时跳转此链接

@wxwxwai
@iPumpkin

感谢回复。所有需要登录的接口 都要在 beforeEach 里做吗？

1. 每个路由配置 meta.login = true
2. router.beforeEach 里检查 login === true && !login 时，重定向到登录页面
这样开哪页之前都有检查了

针对你这个场景，注意第二步是“重定向”，返回的时候会回到 list 页面

先在路由里加一个路由元信息 meta: { requiresAuth: true }

然后在 router.beforeEach 中统一判断 to.meta.requiresAuth 是否需要提示登录

detail 跳登录时别用 push，用 replace，这样后退就直接回 list 了

别用 push，用 replace

就不能在登录页面弄个返回按钮、

为什么要跳到 detail 再判断登录？不是应该先通过 cookie 或者 token 之类的判断登录状态，再选择跳 login 和 detail 吗？
整个设计逻辑错误，竟然没人发现

在 detail 页面直接使用 this.$router.replace('url')就可以了，不要使用 push

#6 #7 的方案比较通用

路由鈎子

就我同意#11 观点嘛（狗头）

#6 楼那样就行了

没登录不让点 detail 链接不就行了，整这么麻烦干啥

@fancy111
@seniorLemon

因为 token 会过期，之前考虑没这么复杂，偷懒了。

看了大家的答案，路由上我也再做些拦截吧。

进了页面过期以后 再跳回 login，再加上 router.replace 就可以解决这个问题了

谢谢大家。

个人认为，在 router.beforeEach 里用路由元信息判断比较好。

肯定没好好看 vue-router

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

router.beforeEach

// 页面权限
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);
});
});