本篇內(nèi)容介紹了“vue權(quán)限控制與管理的實現(xiàn)方法是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

十載的泗水網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整泗水建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“泗水網(wǎng)站設(shè)計”,“泗水網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

一、 菜單權(quán)限

• 菜單權(quán)限：控制用戶在系統(tǒng)中能夠看到哪些菜單項

• 菜單權(quán)限指的就是后臺系統(tǒng)中的左側(cè)的菜單欄，前端可以根據(jù)后端接口返回的權(quán)限數(shù)據(jù)結(jié)合element-ui菜單組件循環(huán)拼接而成即可，有什么權(quán)限就展示什么菜單

• 通過vuex+持久化插件(本地存儲)解決刷新頁面菜單欄不顯示問題

• 實現(xiàn)退出登錄功能時,通過clear()方法清除本地數(shù)據(jù),跳轉(zhuǎn)后通過window.location.reload()刷新當前頁面,可實現(xiàn)清除vuex數(shù)據(jù)的操作

二、 路由權(quán)限

• 路由權(quán)限為了防止用戶惡意通過在地址欄輸入地址發(fā)生強行跳轉(zhuǎn)，可以通過動態(tài)路由對用戶權(quán)限做出相關(guān)限制,有權(quán)限則跳轉(zhuǎn),無權(quán)限則跳轉(zhuǎn)404頁面

• 路由權(quán)限的方法需要在兩個時機調(diào)用initDynamicRoutes,分別是登錄成功時和頁面創(chuàng)建時,否則動態(tài)路由為默認值,刷新無法訪問

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

Vue.use(VueRouter)

// 動態(tài)路由規(guī)則
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')
}

// 路由規(guī)則和字符串的映射關(guān)系
const ruleMapping = {
  table: tableRule,
  users: userRule,
  image: imageRule
}

//靜態(tài)路由
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
})



//路由權(quán)限：用戶登錄后接口返回，存儲到本地緩存
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: "用戶權(quán)限",
    icon: "el-icon-set-up",
    children: [
      {
        id: 21,
        authName: "權(quán)限頁面",
        icon: "el-icon-s-custom",
        path: "users",
        rights: ["view", "edit", "add", "delete"]
      }
    ]
  }
];

//在登錄(login.vue)、頁面刷新（App.vue）的時候，調(diào)用initDynamicRoutes
export function initDynamicRoutes () {
  // 根據(jù)二級權(quán)限 對路由規(guī)則進行動態(tài)的添加
  const currentRoutes = router.options.routes
  rightList.forEach(item => { // 如果是沒有子路由的話 就直接添加進去 如果有子路由的話就進入二級權(quán)限遍歷
    if (item.path) {
      const temp = ruleMapping[item.path]
      // 路由規(guī)則中添加元數(shù)據(jù)meta
      temp.meta = item.rights
      currentRoutes[1].children.push(temp)
    }

    item.children.forEach(item => {
      // item 二級權(quán)限
      const temp = ruleMapping[item.path]
      // 路由規(guī)則中添加元數(shù)據(jù)meta，用于按鈕權(quán)限控制
      temp.meta = item.rights
      currentRoutes[1].children.push(temp)
    })
  })
  // 添加路由規(guī)則
  router.addRoutes(currentRoutes)
}

export default router

三、 按鈕權(quán)限

• 所謂的按鈕權(quán)限是指在某個菜單的界面中，我們需要根據(jù)后端返回的該角色當前操作模塊中對應(yīng)的按鈕權(quán)限數(shù)據(jù)，展示出可進行操作的按鈕，比如刪除，修改，增加等按鈕.

1. 如果要實現(xiàn)按鈕的權(quán)限控制,我們需要使用vue的自定義指令去實現(xiàn): 首先需要創(chuàng)建一個按鈕權(quán)限控制的指令,我們定義這個指令的名稱為: v-permission

2. 在這個指令的內(nèi)部獲取到當前用戶的按鈕權(quán)限（vuex|本地緩存中）數(shù)據(jù)

3. 在通過binding.value獲取到自定義制定屬性值的數(shù)據(jù)

4. 判斷從vuex|本地緩存中獲取到的按鈕權(quán)限數(shù)據(jù)是否包含了自定義指令包含的權(quán)限

5. 如果不包含,我們在設(shè)置el.style.display = “none”,或者使用el.parentNode.removeChild(el)刪除當前 按鈕元素

<el-button v-permission="[$route.path, 'add']">添加</el-button>
directives: {
        // 檢測全選的指令
        permission: {
            // 綁定此指令的標簽插入到dom節(jié)點觸發(fā)
            inserted(el, bind) {
                // el:綁定該指令標簽
                // bind:對象格式 當前綁定指令標簽上的數(shù)據(jù)情況
                // 獲取按鈕上的value值，就是用戶當前要使用的權(quán)限和請求的路由地址
                let value = bind.value//['/user','add']
                //模擬后端返回的當前角色對應(yīng)的權(quán)限
                let rules = {
                    '/menu': ['add', 'edit'],
                    "/user": [ 'edit', 'remove'],
                    "/goods": ['add']
                }
                // 根據(jù)訪問的路由地址獲取該模塊的操作權(quán)限
                let allow = rules[value[0]]
                // 檢測當前操作是否合法
                if (!allow.includes(value[1])) {
                    // 不合法隱藏操作按鈕
                    el.style = "display:none"
                }
            }
        }
 }

四 、 數(shù)據(jù)權(quán)限

• 數(shù)據(jù)權(quán)限就是不同的角色用戶看到的表格數(shù)據(jù)是不一樣的

• 比如張三是項目經(jīng)理就可以看到某一個業(yè)務(wù)表格中的所有數(shù)據(jù)和字段信息

• 李四是普通員工只能看到表格中自己的數(shù)據(jù)

• 代碼實現(xiàn)： 前端在請求頭統(tǒng)一封裝，攜帶用戶信息，最后由后端檢測該用戶權(quán)限解析返回對應(yīng)的數(shù)據(jù)即可；

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' // 注釋掉之后調(diào)的接口將是Mock數(shù)據(jù)

// 請求攔截器
request.interceptors.request.use(req => {
  // console.log(req.url)
  // console.log(req.method)
  if (req.url !== '/login' && req.url !== '/roles') {
    // 不是登錄的請求 也不是獲取權(quán)限的請求 則在請求頭中加入token  不知道如何使用Mock來驗證請求頭中的token 故此處注釋
    // req.headers.Authorization = sessionStorage.getItem('token')
    const action = actionMapping[req.method]
    // 判斷非權(quán)限范圍內(nèi)的請求
    // console.log(router)
    const currentRight = router.currentRoute.meta
    // console.log(currentRight)
    if (currentRight && currentRight.indexOf(action) === -1) {
      // 沒有權(quán)限
      alert('沒有權(quán)限')
      return Promise.reject(new Error('沒有權(quán)限'))
    }
  }
  return req
})


export default request

“vue權(quán)限控制與管理的實現(xiàn)方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當前題目：vue權(quán)限控制與管理的實現(xiàn)方法是什么
分享鏈接：http://vcdvsql.cn/article32/jhiosc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、企業(yè)網(wǎng)站制作、Google、做網(wǎng)站、網(wǎng)站制作、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)