vue2后台管理项目权限的分类

最新推荐文章于 2025-02-24 15:29:50 发布

诗霖雪

最新推荐文章于 2025-02-24 15:29:50 发布

阅读量766

点赞数 19

分类专栏： vue问题文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/m0_56713342/article/details/135853146

版权

本文介绍了如何在Vue应用中实现基于角色的权限控制(RBAC)，包括主页鉴权策略、使用路由守卫进行访问权限控制，以及两种操作权限处理方法——计算属性和自定义指令的应用。

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

权限有3类：主页鉴权，访问权限，操作权限

RBAC-Role Based Access Control基于角色的权限控制

主页鉴权（登录访问拦截）

利用路由全局守卫

思路：判断是否有token，有token是登录成功

再判断是否是去登录页，是就跳转到首页，不是放行

不是登录，判断是否在白名单中，在放行，不在拦截去登录

permission.js

// 主页鉴权
// token
import router from '@/router'
import store from '@/store'
import nProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 路由守卫-----前置守卫
const whiteList = ['/404', '/login']
router.beforeEach((to, from, next) => {
// 开启进度条
  nProgress.start()
  // to 去哪  from 从哪来  next 进行拦截
  if (store.getters.token) {
  // 存在token
    if (to.path === '/login') {
      nProgress.done()// 关闭进度条
      next('/')// 跳转到主页
    } else {
      next()// 放行
    }
  } else {
    // 没有登录  看是不是在白名单（不需要登录也可以访问的页面
    if (