vue 校验当前页面是否登录,没有登录成功则跳转至登录页面,且登录成功后返回之前的页面
时间: 2023-08-22 22:04:31 浏览: 39
可以通过路由守卫来校验当前页面是否登录,如果没有登录成功则跳转至登录页面,登录成功后返回之前的页面。可以通过以下步骤实现:
1. 在路由配置中定义一个全局前置守卫,并在其中判断用户是否已经登录:
```javascript
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (token) { // 判断用户是否已经登录
next()
} else {
next({
path: '/login',
query: {
redirect: to.fullPath // 将跳转的路由path作为参数,登录成功后跳转到该路由
}
})
}
} else {
next()
}
})
```
2. 在登录成功后,将 token 存储在本地,并且判断是否存在 redirect 参数,如果存在则跳转到 redirect 指定的路由:
```javascript
// 登录成功后的处理
localStorage.setItem('token', token)
if (to.query.redirect) {
next({
path: to.query.redirect
})
} else {
next({
path: '/'
})
}
```
这样就可以实现在未登录的情况下访问需要登录权限的页面会自动跳转到登录页面,并且登录成功后会返回之前的页面。