【应用】使用 vue-router 之导航守卫 + meta + localStorage 实现在未登录状态下跳转到登录页面的功能

最新推荐文章于 2024-04-19 19:43:17 发布

原创最新推荐文章于 2024-04-19 19:43:17 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-router #导航守卫 #登录权限

Vue 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍如何在Vue项目中使用导航守卫实现权限控制，包括在router.js中定义需登录访问的路由，并在main.js中设置全局前置守卫，判断用户是否已登录，以及如何阻止已登录用户重复进入登录页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-router 之导航守卫的官网地址

具体实现：

1.router.js文件

在定义路由的时候，加上 meta: {requireAuth: true}，定义一个完整路由的代码如下所示：

    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {requireAuth: true}
    }

2.main.js文件

router.beforeEach((to, from, next) => {
  console.log('上一个页面：', from)
  console.log('下一个页面：', to)

  let userToken = localStorage.getItem('userToken')

  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    console.log('main-token：', userToken)
    if (userToken) { // 判断本地是否存在token
      next()
    } else {
      next({
        path: '/Login'
      })
    }
  } else {
    next()
  }

  /* 如果本地存在token,则不允许直接跳转到登录页面 */
  if (to.fullPath === '/Login') {
    if (userToken) {
      next({
        path: from.fullPath
      })
    } else {
      next()
    }
  }
})

注：上述代码中涉及到的userToken需要在登录请求成功之后将后台返回的token保存到localStorage中，代码如下所示：

localStorage.setItem('userToken', token)

这样，就可以通过 localStorage.getItem('userToken') 来获取userToken了。

END