詳解vue各種權限控制與管理的實現思路

這篇文章為大家帶來了關於vue的相關知識，其中主要詳細介紹了vue各種權限控制與管理的實現思路，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。

一、選單權限

• #選單權限：控制使用者在系統中能夠看到哪些選單項目
• #選單權限指的就是後台系統中的左側的選單欄，前端可以根據後端介面回傳的權限資料結合element-ui選單元件循環拼接而成即可，有什麼權限就展示什麼選單
• 透過vuex 持久化外掛程式(本機儲存)解決重新整理頁面功能表列不顯示問題
• 實作退出登入功能時,透過clear()方法清除本機資料,跳轉後通過window.location.reload()刷新目前頁面,可實現清除vuex資料的操作

二、路由權限

• 路由權限為了防止使用者惡意透過在網址列輸入位址發生強行跳轉，可以透過動態路由對使用者權限做出相關限制,有權限則跳轉,無權限則跳轉404頁面
• 路由權限的方法需要在兩個時機呼叫initDynamicRoutes,分別是登入成功時和頁面建立時,否則動態路由為預設值,刷新無法存取

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

三、按鈕權限

• 所謂的按鈕權限是指在某個選單的介面中，我們需要根據後端返回的該角色當前操作模組中對應的按鈕權限數據，展示出可進行操作的按鈕，例如刪除，修改，增加等按鈕.
• 1. 如果要實現按鈕的權限控制,我們需要使用vue的自訂指令去實現: 首先需要創建一個按鈕權限控制的指令,我們定義這個指令的名稱為: v-permission
• 2. #在這個指令的內部取得到目前使用者的按鈕權限（vuex|本地快取中）資料
• 3. 在透過binding.value取得到自訂制定屬性值的資料
• 4. 判斷從vuex|本機快取取得的按鈕權限資料是否包含了自訂指令所包含的權限
• 5. 如果不包含,我們在設定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"
                }
            }
        }
 }

四、資料權限

• 資料權限就是不同的角色使用者看到的表格資料是不一樣的
• 例如張三是專案經理就可以看到某一個業務表格中的所有資料和欄位資訊
• 李四是一般員工只能看到表格中自己的資料
• 程式碼實作： 前端在請求頭統一封裝，攜帶使用者訊息，最後由後端偵測該使用者權限解析回傳對應的資料即可；

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

推薦學習：《vue影片教學》

以上是詳解vue各種權限控制與管理的實現思路的詳細內容。更多資訊請關注PHP中文網其他相關文章！