Vue의 다양한 권한 제어 및 관리 구현 아이디어에 대한 자세한 설명

藏色散人

풀어 주다： 2023-04-03 15:09:47

앞으로

2864명이 탐색했습니다.

이 글은 Vue에 대한 관련 지식을 주로 소개하며, Vue의 다양한 권한 제어 및 관리 구현 아이디어를 자세히 소개하고 있으니 관심 있는 친구들이 함께 살펴보시면 좋겠습니다.

1. 메뉴 권한

메뉴 권한: 사용자가 시스템에서 볼 수 있는 메뉴 항목을 제어합니다.
메뉴 권한은 백그라운드 시스템의 왼쪽 메뉴 표시줄을 참조합니다. 백엔드 인터페이스 반환된 권한 데이터는 element-ui 메뉴 구성 요소를 사용하여 루프에 함께 연결할 수 있습니다. 메뉴는 권한에 따라 표시됩니다.
vuex+persistence 플러그인(로컬 저장소)을 사용하여 해결하세요. 페이지 새로고침 시 메뉴바가 표시되지 않는 문제
로그아웃 기능 구현 시 clear() 메소드를 통해 로컬 데이터를 삭제하고, window.location을 통해 현재 페이지를 새로고침하세요. vuex 데이터를 삭제하기 위한 점프 후 reload()clear()方法清除本地数据,跳转后通过window.location.reload()刷新当前页面,可实现清除vuex数据的操作

二、路由权限

路由权限为了防止用户恶意通过在地址栏输入地址发生强行跳转，可以通过动态路由对用户权限做出相关限制,有权限则跳转,无权限则跳转404页面
路由权限的方法需要在两个时机调用initDynamicRoutes,分别是登录成功时和页面创建时,否则动态路由为默认值,刷新无法访问

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import Layout from &#39;@/layout&#39;
import store from &#39;@/store&#39;

Vue.use(VueRouter)

// 动态路由规则
const tableRule = {
  path: &#39;/table&#39;,
  name: &#39;table&#39;,
  component: () => import(&#39;@/views/table/index.vue&#39;)
}
const imageRule = {
  path: &#39;/image&#39;,
  name: &#39;image&#39;,
  component: () => import(&#39;@/views/image&#39;)
}
const userRule = {
  path: &#39;/users&#39;,
  name: &#39;users&#39;,
  component: () => import(&#39;@/views/users&#39;)
}

// 路由规则和字符串的映射关系
const ruleMapping = {
  table: tableRule,
  users: userRule,
  image: imageRule
}

//静态路由
const routes = [
  {
    path: &#39;/login&#39;,
    // name: &#39;login&#39;, // 这里如果有name 控制台会提示
    component: () => import(&#39;@/views/login&#39;)
  },
  {
    path: &#39;/&#39;,
    component: Layout,
    children: [
      {
        path: &#39;&#39;,
        // name: &#39;home&#39;,
        component: () => import(&#39;@/views/home&#39;)
      },
      {
        path: &#39;/chart&#39;,
        component: () => import(&#39;@/views/chart&#39;)
      }
    ]
  }
]

const router = new VueRouter({
  routes
})



//路由权限：用户登录后接口返回，存储到本地缓存
const rightList = [
  {
    id: 1,
    authName: "基本页面",
    icon: "el-icon-connection",
    children: [
      {
        id: 11,
        authName: "表格页面",
        icon: "el-icon-s-grid",
        path: "table",
        rights: ["view", "edit", "add", "delete"]
      },
      {
        id: 12,
        authName: "素材页面",
        icon: "el-icon-s-marketing",
        path: "image",
        rights: ["view", "edit", "add", "delete"]
      }
    ]
  },
  {
    id: 2,
    authName: "用户权限",
    icon: "el-icon-set-up",
    children: [
      {
        id: 21,
        authName: "权限页面",
        icon: "el-icon-s-custom",
        path: "users",
        rights: ["view", "edit", "add", "delete"]
      }
    ]
  }
];

//在登录(login.vue)、页面刷新（App.vue）的时候，调用initDynamicRoutes
export function initDynamicRoutes () {
  // 根据二级权限 对路由规则进行动态的添加
  const currentRoutes = router.options.routes
  rightList.forEach(item => { // 如果是没有子路由的话 就直接添加进去 如果有子路由的话就进入二级权限遍历
    if (item.path) {
      const temp = ruleMapping[item.path]
      // 路由规则中添加元数据meta
      temp.meta = item.rights
      currentRoutes[1].children.push(temp)
    }

    item.children.forEach(item => {
      // item 二级权限
      const temp = ruleMapping[item.path]
      // 路由规则中添加元数据meta，用于按钮权限控制
      temp.meta = item.rights
      currentRoutes[1].children.push(temp)
    })
  })
  // 添加路由规则
  router.addRoutes(currentRoutes)
}

export default router

로그인 후 복사

三、按钮权限

所谓的按钮权限是指在某个菜单的界面中，我们需要根据后端返回的该角色当前操作模块中对应的按钮权限数据，展示出可进行操作的按钮，比如删除，修改，增加等按钮.
1. 如果要实现按钮的权限控制,我们需要使用vue的自定义指令去实现: 首先需要创建一个按钮权限控制的指令,我们定义这个指令的名称为: v-permission
1. 在这个指令的内部获取到当前用户的按钮权限（vuex|本地缓存中）数据
1. 在通过binding.value获取到自定义制定属性值的数据
1. 判断从vuex|本地缓存中获取到的按钮权限数据是否包含了自定义指令包含的权限
1. 如果不包含,我们在设置el.style.display = “none”,或者使用el.parentNode.removeChild(el)删除当前按钮元素

<el-button v-permission="[$route.path, &#39;add&#39;]">添加</el-button>
directives: {
        // 检测全选的指令
        permission: {
            // 绑定此指令的标签插入到dom节点触发
            inserted(el, bind) {
                // el:绑定该指令标签
                // bind:对象格式 当前绑定指令标签上的数据情况
                // 获取按钮上的value值，就是用户当前要使用的权限和请求的路由地址
                let value = bind.value//[&#39;/user&#39;,&#39;add&#39;]
                //模拟后端返回的当前角色对应的权限
                let rules = {
                    &#39;/menu&#39;: [&#39;add&#39;, &#39;edit&#39;],
                    "/user": [ &#39;edit&#39;, &#39;remove&#39;],
                    "/goods": [&#39;add&#39;]
                }
                // 根据访问的路由地址获取该模块的操作权限
                let allow = rules[value[0]]
                // 检测当前操作是否合法
                if (!allow.includes(value[1])) {
                    // 不合法隐藏操作按钮
                    el.style = "display:none"
                }
            }
        }
 }

로그인 후 복사

四、数据权限

数据权限

2. 라우팅 권한
라우팅 권한 사용자가 주소를 입력하여 악의적으로 강제로 점프하는 것을 방지하기 위해 주소 표시줄에서 동적 라우팅을 사용하여 사용자 권한을 제한할 수 있습니다. 권한이 부여된 경우 점프합니다. 권한이 없으면 404 페이지로 점프합니다.
라우팅 권한 메서드는 initDynamicRoutes</code를 호출해야 합니다. > 두 번, 즉 로그인이 성공할 때와 페이지가 생성될 때. 그렇지 않으면 동적 경로가 기본값이 되며 새로 고쳐도 액세스할 수 없습니다. 3. 버튼 권한</li></ul><p> 소위 버튼 권한은 특정 메뉴의 인터페이스에서 백엔드에서 반환된 역할의 현재 작업 모듈에 대응해야 함을 의미합니다. 버튼 권한 데이터는 조작할 수 있는 버튼을 보여줍니다. <a href="https://www.php.cn/course/list/18.html" target="_blank"></a><ol><br/>버튼 권한 제어를 구현하려면 vue의 사용자 정의 지침을 사용해야 합니다. 먼저 버튼 권한 제어를 위한 명령을 만들어야 합니다. 이 명령의 이름을 다음과 같이 정의합니다: <code>v-permission

import axios from 'axios' import router from '@/router' const request = axios.create() // 映射 const actionMapping = { get: 'view', post: 'add', put: 'edit', delete: 'delete' } // request.defaults.baseURL = 'http://127.0.0.1:7001' // 注释掉之后调的接口将是Mock数据 // 请求拦截器 request.interceptors.request.use(req => { // console.log(req.url) // console.log(req.method) if (req.url !== '/login' && req.url !== '/roles') { // 不是登录的请求也不是获取权限的请求则在请求头中加入token 不知道如何使用Mock来验证请求头中的token 故此处注释 // req.headers.Authorization = sessionStorage.getItem('token') const action = actionMapping[req.method] // 判断非权限范围内的请求 // console.log(router) const currentRight = router.currentRoute.meta // console.log(currentRight) if (currentRight && currentRight.indexOf(action) === -1) { // 没有权限 alert('没有权限') return Promise.reject(new Error('没有权限')) } } return req }) export default request