vue高精度全局权限处理

最新推荐文章于 2023-12-01 20:45:00 发布

飞奔的喀纳斯蜗牛

最新推荐文章于 2023-12-01 20:45:00 发布

阅读量251

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_39235090/article/details/106122427

版权

本文探讨了在前端处理权限控制的常见需求，通过举例说明如何避免重复代码，特别是针对多处出现的功能和复杂的权限判断。作者提出了一种全局处理权限的方法，以减少冗余并优化代码结构，具体实战中展示了如何处理按钮显示的权限问题。

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

权限的控制由前端处理的场景很多，例如根据后台返回内容，判断该人是否对此功能有权限，进而去修改元素v-if / v-show，这种情况下，当这个功能在多处地方出现，就会导致我们做很多很多不必要的重复代码，如果判断条件繁琐的情况，更加冗余，代码量也会增加很多。因此我们可以造一个小车轮，挂在全局上对权限进行处理

实战 - 处理某按钮显示权限问题

/*
    在项目里新建一个common文件夹用于存放全局 .js 文件
    这种全局文件夹做法相当普遍，一般项目里都应该有这样一个文件夹来管理全局的东西
*/

// common/jurisdiction.js  用于存放与权限相关的全局函数/变量

export function checkJurisdiction(key) {
    // 权限数组
    let jurisdictionList = ['1', '2', '3', '5']
    let index = jurisdictionList.indexOf(key)
    console.log('index:',index)
    if (index > -1) {
        // 有权限
        return true
    } else {
        // 无权限
        return false
    }
}

// 将全局权限Js挂载到全局中
// main.js

import { checkJurisdiction } from './common/jurisdiction'

// 优雅操作 - VUE自定义指令
Vue.directive('permission',{
  inserted(el, binding){
    // inserted → 元素插入的时候