后台管理系统如何利用Vue-Router做权限验证管理

开发 项目管理
今天我们就来讲一下在后台的权限管理系统中,Vue-Router是如何配合实现的。

前沿

后台管理系统中权限验证是比较核心的一块内容,每个登录用户都有对应的角色,每个角色都有对应的权限,比如普通用户只有查看权限,管理员用户有编辑权限,所以不同的用户角色登录进来后,看到的页面菜单是不一样的

今天我们就来讲一下在后台的权限管理系统中,Vue-Router是如何配合实现的

后台管理系统

具体实现

其实要实现起来也比较简单,主要是借助Vue-Router的两个api

1、addRoutes

通过 router.addRoutes 动态挂载路由信息,用户成功登录后,由后台返回当前用户所具有的权限菜单

// 登录成功后,后台返回权限数据如下
const menuList= [
  {
    // 菜单名字
    name: '文章管理',
    // 是否是菜单,true是,false是页面
    isFolder: true,
    // 图标
    icon: 'article',
    // 是否在导航栏不显示,false表示显示
    hidden: false,
    // 路由url
    url: '/article',
    // 子菜单
    menuList: [{
      // 菜单名字
      name: '文章编辑',
      // 是否是菜单,true是,false是页面
      isFolder: false,
      // 图标
      icon: 'edit',
      // 是否在导航栏不显示,false表示显示
      hidden: false,
      // 路由url
      url: '/article/edit',
      // 子菜单
      menuList: [],
    }]
  },
  {
    name: '用户管理',
    isFolder: false,
    icon: 'user',
    hidden: false,
    url: '/user/manage',
    menuList: [],
  }
]

// 我们根据Vue-Router需要的数据
// 把上面后台返回的数据做一次转化
const routes= [{
   // 路由路径
   path: '/article',
   // 如果是菜单,那么引用通用的布局模板
   component: () => import('@/views/layout.vue'),
   meta: {
    // 图标
    icon: 'article',
    // 菜单名字
    title: '文章管理',
    // 是否在导航栏隐藏
    hidden: false,
  },
  children: [{
    // 这是页面路由
    path: '/article/edit',
    name: 'article/edit',
    // 具体的页面组件
    component: () => import('@/views/article/edit.vue'),
    meta: {
      // 图标
      icon: 'edit',
      // 页面名字
      title: '文章编辑',
      // 是否在导航栏隐藏
      hidden: false,
    },
  }],
  },
 {
   path: '/article/edit',
   name: 'article/edit',
   component: () => import('@/views/article/edit.vue'),
   meta: {
     icon: 'edit',
     title: '文章编辑',
     hidden: false,
   },
 },
]

// 最开始的路由配置是有一个登录页的
const initRoutes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login'),
    meta: {
     icon: '',
     title: '登录',
     hidden: true,
    },
   },
]

// 登录成功后
// 再把动态生成的路由信息和登录页的路由拼接起来
// 生成最后的路由信息
router.addRoutes(initRoutes.concat(routes))

// 最后通过router.push(url)
// 跳转到动态生成的第一个路由页面
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.

至于页面内部的按钮根据用户角色显示和隐藏,比如说普通用户是看不到页面的“编辑”按钮

其实我们可以在用户登录成功后,让后台再把当前这个用户的角色信息返回并存在Vuex中,比如返回['user']代表普通用户,返回['manage']代表管理员,返回['user','mange']代表又有管理员的权限和又有普通用户的权限,然后我们就可以在页面中根据这个值判定是否显示对应的按钮

2、beforeEach

通过 router.beforeEach 这个导航守卫,控制没有登录的用户,始终只能先去登录页登录,如果是已经登录过的,那么就直接进入对应页面

// 这里可以放一些,不需要权限校验的菜单
const NoAuthUrlList = [
  '/500',
  '/demo',
]
router.beforeEach((to, from, next) => {
    if (NoAuthUrlList.includes(to.path)) {
      // 不需要权限校验的,直接进入页面
      next()
    } else {
      // 需要权限校验的
      if (!store.getters.token) {
        // 没有token代表没有登录过
        // 直接去登录页
        next('/login')
      } else {
        // 有token
        // 直接进入登录页
        next()
      }
    }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

好了Vue-Router做权限验证管理就讲到这里

责任编辑:姜华 来源: 今日头条
相关推荐

2021-11-11 08:20:47

Vue 技巧 开发工具

2021-12-14 19:40:07

Node路由Vue

2025-01-07 08:00:00

2022-02-10 10:10:03

数据库表权限表数据库操作

2024-05-06 00:00:00

后台管理系统

2025-01-03 09:34:54

2022-02-02 21:29:39

路由模式Vue-Router

2023-07-31 11:43:45

视频管理系VMS

2011-09-02 11:39:53

2024-08-19 09:25:42

2010-04-09 17:35:22

2022-06-24 07:15:53

Vuehistory模式

2025-02-12 09:00:00

2023-12-14 08:13:56

2021-01-12 15:54:03

Vue开发管理系统

2021-04-27 07:39:40

Vue后台管理

2010-04-14 14:30:28

Unix操作系统

2024-03-08 08:37:20

Vue 3VueAxios

2012-07-30 09:32:00

Web

2023-11-20 17:38:07

Djangoagtailadmin
点赞
收藏

51CTO技术栈公众号