vue-cli项目的权限控制

最新推荐文章于 2022-09-28 10:44:30 发布

XingFang666

最新推荐文章于 2022-09-28 10:44:30 发布

阅读量1.2k

点赞数

分类专栏：项目记录vue 文章标签： vue 权限

本文链接：https://blog.youkuaiyun.com/xfmuchengxue/article/details/99863765

版权

项目同时被 2 个专栏收录

23 篇文章

订阅专栏

记录vue

10 篇文章

订阅专栏

本文介绍了如何在Vue CLI项目中进行前端权限控制，通过创建JS文件并将其引入到main.js中，根据Session中存储的权限判断，实现不同权限用户跳转至不同页面的功能。

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

1、vue项目的前端权限控制，创建一个js文件

2、将js文件引入main.js里面，一登录跳转页面之前判断session里面存的权限有没有js文件里面的，各种不同的权限跳转不同的页面。

import allPermissions from '@/utils/permissionsAll'

window.allPermissions = allPermissions

// 路由拦截器
router.beforeEach((to, from, next) => {
  if (to.path !== '/forget') {
    if (session.get('userBh') && to.path !== '/forget') {
      if (to.path === '/system') {
        if (session.get('session_user').permissions.indexOf(allPermissions.MENU_USER) !== -1) {
          next('/system/user')
        } else {
          next('/system/appuser')
        }
      } else if (to.path === '/party') {
        if (session.get('session_user').permissions.indexOf(allPermissions.MENU_PARTMEMBER) !== -1) {
          next('/party/member')
        } else {
          next('/party/org')
        }
      } else {
        if (to.path !== '/index/home' && to.meta.permission !== true) {
          if (to.meta.permission && session.get('session_user').permissions.indexOf(to.meta.permission) === -1) {
            next('/noPermission')
          } else {
            next()
          }
        }
        next()
      }
    } else {
      if (to.path === '/') {
        next()
      } else {
        next('/')
      }
    }
  } else {
    next()
  }
})