Detailed explanation of the implementation ideas of Vue's various permissions control and management

This article brings you relevant knowledge about vue, which mainly introduces in detail the implementation ideas of various permission control and management of vue. Friends who are interested can take a look at it together. I hope it will be helpful to everyone.

1. Menu permissions

• Menu permissions: Control which menu items users can see in the system
• Menu permission refers to the left menu bar in the back-end system. The front-end can be spliced ​​together based on the permission data returned by the back-end interface combined with the element-ui menu component. The menu will be displayed according to the permissions
• Solve the problem of the refresh page menu bar not being displayed through the vuex persistence plug-in (local storage)
• When implementing the logout function, clear the local data through the clear() method, and pass after the jump window.location.reload()Refresh the current page to clear the vuex data

2. Routing permissions

• Routing permissions In order to prevent The user maliciously enters the address in the address bar and is forced to jump. Dynamic routing can be used to restrict user permissions. If there is permission, it will jump. If there is no permission, it will jump to the 404 page.
• The method of routing permissions needs to be in initDynamicRoutes is called at two times, namely when the login is successful and when the page is created. Otherwise, the dynamic route is the default value and cannot be accessed by refreshing

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout'
import store from '@/store'

Vue.use(VueRouter)

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

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

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

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

3. Button permissions

• The so-called button permissions mean that in a certain menu interface, we need to display the buttons that can be operated, such as delete and modify, based on the corresponding button permission data in the current operation module of the role returned by the backend. , add and other buttons.
• 1. If we want to implement button permission control, we need to use vue's custom instructions to achieve it: First we need to create a button permission control instruction, we define this instruction The name is: v-permission
• 2. Get the current user’s button permission inside this command (vuex|local cache) Data
• 3. Get the data of the custom attribute value through binding.value
• 4. Determine whether the button permission data obtained from vuex|local cache contains the permissions contained in the custom instruction
• 5. If it is not included, we set el.style.display = “none” , or use el.parentNode.removeChild(el) to delete the current button element

<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"
                }
            }
        }
 }

4. Data permissions

• Data permissionsThat is, users with different roles will see different table data
• For example, if Zhang San is a project manager, he can see all the data and field information in a certain business form
• Li Si is an ordinary employee and can only see his own data in the form
• Code implementation: The front end encapsulates the request header uniformly, carrying user information, and finally the back end detects the user permissions, parses and returns the corresponding data;

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

Recommended learning: "vue video tutorial 》

The above is the detailed content of Detailed explanation of the implementation ideas of Vue's various permissions control and management. For more information, please follow other related articles on the PHP Chinese website!