没登录跳登录页

最新推荐文章于 2023-05-15 17:17:18 发布

yuyu_2019

最新推荐文章于 2023-05-15 17:17:18 发布

阅读量492

点赞数

分类专栏： VUE 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/yuyu_2019/article/details/122231939

版权

VUE 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js应用中实现路由权限管理的方法，通过在路由配置中添加`meta`字段，如`requireAuth`来标记需要登录的页面。同时，在全局路由守卫`beforeEach`中检查sessionStorage中的token，如果存在则允许访问，否则重定向到登录页。这是一个基础的前端权限控制实现。

摘要由CSDN通过智能技术生成

router/index.js
加meta

routes: [
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/list',
      name: 'list',
      component: list,
      meta: {
        title: 'list',
        requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
      },
    },
    {
      path: '/',
      name: 'index',
      component: index,
      meta: {
        title: 'detail',
        requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
      },
    },
]

main.js
先判断要不要登录验证，再判断session里有没有token，没有就去登录页。

// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 需要进行登录验证

    // 判断session里是否有token
    let token = sessionStorage.getItem("token")
    if (token) { // 有token
      next()
    } else { // 没有token
      next('/login')
    }

  } else { // 不需要进行登录验证
    next()
  }

})