Vue 如何实现登录后,跳转到登录之前要访问的页面
原创
©著作权归作者所有:来自51CTO博客作者十月ooOO的原创作品,请联系作者获取转载授权,否则将追究法律责任
Vue 如何实现登录后,跳转到登录之前要访问的页面
一、需求
有些时候,需要实现这样的功能:
- 项目中的有些页面是可以直接访问的,不需要登录。
- 但这个页面中的一些链接一些路径则需要登录后才能查看,也就是说点击这些链接的时候就直接跳转到登录页面了
- 在登录之后,需要重新定位到之前要访问的路径上去,而不是跳转到登录后的默认路径中
举个例子说:
- login 成功后会自动跳转到
/index
页面 - 在
/index
页面中有一个/user/info
的快捷路径 - 未登录之前点击
/user/info
这个路径,会直接跳转至/login
页面 - 此时需要实现这样的功能,在登录之后,再回到之前要访问的
/user/info
路径上去
二、实现思路
那么如何实现这个需求呢。
用 store 来实现
- 在
store.state
中新建一个变量lastVisitPath
记录进入登录页面之前要去的 path - 登录成功之后,判断
lastVisitPath
这个变量是否有值,如果有,就跳到这个路径上去,并清空这个变量值
三、实现
在 router 的 beforeEach
方法中判断,在跳转至登录之前记录这个 lastVisitPath
// 引入 state 和 mutation
computed: {
...mapState(['lastVisitRoute'])
},
methods: {
...mapMutations(['SET_LAST_VISIT_ROUTE']),
}
//
if (token) {
} else {
store.commit('SET_LAST_VISIT_ROUTE', to.path)
next({path: '/login'})
}
登录成功后,如果存在 lastVisitPath 就跳转到它
// 引入 state 和 mutation
computed: {
...mapState(['lastVisitRoute'])
},
methods: {
...mapMutations(['SET_LAST_VISIT_ROUTE']),
}
//
if (this.lastVisitRoute){
this.$router.push({path: this.lastVisitRoute})
.then(res => {
// 跳转成功后,清除这个 lastVisitRoute 变量值
this.SET_LAST_VISIT_ROUTE(null)
})
.catch(error => {
console.log(error)
});
} else {
this.$router.push({path: '/'}).catch(error => {
console.log(error)
})
}