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

[firhome]

项目用的是 vue + axios

现在情况是这样。

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

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


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

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

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


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

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


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

[wxwxwai]

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

[chengxy]

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

[iPumpkin]

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

[coolooks]

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

[firhome]

@wxwxwai
@iPumpkin

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

[learnshare]

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

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

[iPumpkin]

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

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

[Toninie]

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

[zaul]

别用 push，用 replace

[mlxj]

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

[fancy111]

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

[shengchao]

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

[fishlium]

#6 #7 的方案比较通用

[HowardTang]

路由鈎子

[seniorLemon]

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

[123s]

#6 楼那样就行了

[DoveAz]

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

[firhome]

@fancy111
@seniorLemon

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

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

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

谢谢大家。

[oneisall0423]

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

[yinft]

肯定没好好看 vue-router