导航守卫判断登录注册页面

上一节我们使用导航守卫判断用户是否登录，如果没有登录访问需要登录的页面，那么会自动跳转到登录页。但是有2个页面需要特殊注意，就是登录和注册页面。

如果一个用户已经登录了，那么应该禁止访问登录和注册页面。所以，我们依然可以使用导航守卫来实现。

实现方式

我们首先需要在路由配置中添加一个前置守卫，在每次路由导航之前执行一段代码来判断当前页面是否允许访问。

frontend/src/router/index.js

// 从本地存储中获取 token
const token = localStorage.getItem('token')

// 如果存在 token,说明用户已登录,提交 mutation 设置登录状态
if (token) {
 store.commit('setLoginStatus', true) 
}

// 路由导航守卫
router.beforeEach((to, from, next)=> {

 // 如果已经登录,并要访问的页面是登录或注册页,直接跳转主页
 if (store.state.isLogin && (to.name === 'Login' || to.name === 'Register') ){ 
   next({name: 'home'})

 // 如果访问的页面需要登录,且未登录,跳转登录页
 }else if (to.matched.some(record => record.meta.requireLogin) && !store.state.isLogin) {
   next({name: 'Login', query:{jump: to.path}})
 
 // 其他情况直接 next
 } else {
   next()
 }
})

代码解析

上述代码中，to.name就是路由中的“name”， 所以，to.name === 'Login' || to.name === 'Register'

就表示登录页面和注册页面。

如果用户已经登录，再次访问登录页和注册页，将自动跳转至首页。

在判断登录状态时，我们可以根据实际需求来调整具体的逻辑。在本例中，我们使用了islogin状态来判断用户是否已登录。你可以根据项目的需求来定义自己的登录判断逻辑。

这就是使用导航守卫来判断用户是否已登录的方法。通过这种方式，我们可以针对不同的页面设置不同的访问权限，从而提升应用的安全性和用户体验。