本篇內(nèi)容介紹了“vue權(quán)限控制與管理的實(shí)現(xiàn)方法是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
十載的泗水網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整泗水建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“泗水網(wǎng)站設(shè)計(jì)”,“泗水網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
菜單權(quán)限：控制用戶在系統(tǒng)中能夠看到哪些菜單項(xiàng)
菜單權(quán)限指的就是后臺(tái)系統(tǒng)中的左側(cè)的菜單欄，前端可以根據(jù)后端接口返回的權(quán)限數(shù)據(jù)結(jié)合element-ui菜單組件循環(huán)拼接而成即可，有什么權(quán)限就展示什么菜單
通過(guò)vuex+持久化插件(本地存儲(chǔ))解決刷新頁(yè)面菜單欄不顯示問(wèn)題
實(shí)現(xiàn)退出登錄功能時(shí),通過(guò)clear()方法清除本地?cái)?shù)據(jù),跳轉(zhuǎn)后通過(guò)window.location.reload()刷新當(dāng)前頁(yè)面,可實(shí)現(xiàn)清除vuex數(shù)據(jù)的操作
路由權(quán)限為了防止用戶惡意通過(guò)在地址欄輸入地址發(fā)生強(qiáng)行跳轉(zhuǎn)，可以通過(guò)動(dòng)態(tài)路由對(duì)用戶權(quán)限做出相關(guān)限制,有權(quán)限則跳轉(zhuǎn),無(wú)權(quán)限則跳轉(zhuǎn)404頁(yè)面
路由權(quán)限的方法需要在兩個(gè)時(shí)機(jī)調(diào)用initDynamicRoutes,分別是登錄成功時(shí)和頁(yè)面創(chuàng)建時(shí),否則動(dòng)態(tài)路由為默認(rèn)值,刷新無(wú)法訪問(wèn)
重慶分公司
重慶分公司
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout'
import store from '@/store'
Vue.use(VueRouter)
// 動(dòng)態(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 控制臺(tái)會(huì)提示
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)限：用戶登錄后接口返回，存儲(chǔ)到本地緩存
const rightList = [
{
id: 1,
authName: "基本頁(yè)面",
icon: "el-icon-connection",
children: [
{
id: 11,
authName: "表格頁(yè)面",
icon: "el-icon-s-grid",
path: "table",
rights: ["view", "edit", "add", "delete"]
},
{
id: 12,
authName: "素材頁(yè)面",
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)限頁(yè)面",
icon: "el-icon-s-custom",
path: "users",
rights: ["view", "edit", "add", "delete"]
}
]
}
];
//在登錄(login.vue)、頁(yè)面刷新（App.vue）的時(shí)候，調(diào)用initDynamicRoutes
export function initDynamicRoutes () {
// 根據(jù)二級(jí)權(quán)限 對(duì)路由規(guī)則進(jìn)行動(dòng)態(tài)的添加
const currentRoutes = router.options.routes
rightList.forEach(item => { // 如果是沒(méi)有子路由的話 就直接添加進(jìn)去 如果有子路由的話就進(jìn)入二級(jí)權(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 二級(jí)權(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)限是指在某個(gè)菜單的界面中，我們需要根據(jù)后端返回的該角色當(dāng)前操作模塊中對(duì)應(yīng)的按鈕權(quán)限數(shù)據(jù)，展示出可進(jìn)行操作的按鈕，比如刪除，修改，增加等按鈕.
如果要實(shí)現(xiàn)按鈕的權(quán)限控制,我們需要使用vue的自定義指令去實(shí)現(xiàn): 首先需要?jiǎng)?chuàng)建一個(gè)按鈕權(quán)限控制的指令,我們定義這個(gè)指令的名稱為: v-permission
在這個(gè)指令的內(nèi)部獲取到當(dāng)前用戶的按鈕權(quán)限（vuex|本地緩存中）數(shù)據(jù)
在通過(guò)binding.value獲取到自定義制定屬性值的數(shù)據(jù)
判斷從vuex|本地緩存中獲取到的按鈕權(quán)限數(shù)據(jù)是否包含了自定義指令包含的權(quán)限
如果不包含,我們?cè)谠O(shè)置el.style.display = “none”,或者使用el.parentNode.removeChild(el)刪除當(dāng)前 按鈕元素
添加
directives: {
// 檢測(cè)全選的指令
permission: {
// 綁定此指令的標(biāo)簽插入到dom節(jié)點(diǎn)觸發(fā)
inserted(el, bind) {
// el:綁定該指令標(biāo)簽
// bind:對(duì)象格式 當(dāng)前綁定指令標(biāo)簽上的數(shù)據(jù)情況
// 獲取按鈕上的value值，就是用戶當(dāng)前要使用的權(quán)限和請(qǐng)求的路由地址
let value = bind.value//['/user','add']
//模擬后端返回的當(dāng)前角色對(duì)應(yīng)的權(quán)限
let rules = {
'/menu': ['add', 'edit'],
"/user": [ 'edit', 'remove'],
"/goods": ['add']
}
// 根據(jù)訪問(wèn)的路由地址獲取該模塊的操作權(quán)限
let allow = rules[value[0]]
// 檢測(cè)當(dāng)前操作是否合法
if (!allow.includes(value[1])) {
// 不合法隱藏操作按鈕
el.style = "display:none"
}
}
}
}
數(shù)據(jù)權(quán)限就是不同的角色用戶看到的表格數(shù)據(jù)是不一樣的
比如張三是項(xiàng)目經(jīng)理就可以看到某一個(gè)業(yè)務(wù)表格中的所有數(shù)據(jù)和字段信息
李四是普通員工只能看到表格中自己的數(shù)據(jù)
代碼實(shí)現(xiàn)： 前端在請(qǐng)求頭統(tǒng)一封裝，攜帶用戶信息，最后由后端檢測(cè)該用戶權(quán)限解析返回對(duì)應(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ù)
// 請(qǐng)求攔截器
request.interceptors.request.use(req => {
// console.log(req.url)
// console.log(req.method)
if (req.url !== '/login' && req.url !== '/roles') {
// 不是登錄的請(qǐng)求 也不是獲取權(quán)限的請(qǐng)求 則在請(qǐng)求頭中加入token 不知道如何使用Mock來(lái)驗(yàn)證請(qǐng)求頭中的token 故此處注釋
// req.headers.Authorization = sessionStorage.getItem('token')
const action = actionMapping[req.method]
// 判斷非權(quán)限范圍內(nèi)的請(qǐng)求
// console.log(router)
const currentRight = router.currentRoute.meta
// console.log(currentRight)
if (currentRight && currentRight.indexOf(action) === -1) {
// 沒(méi)有權(quán)限
alert('沒(méi)有權(quán)限')
return Promise.reject(new Error('沒(méi)有權(quán)限'))
}
}
return req
})
export default request“vue權(quán)限控制與管理的實(shí)現(xiàn)方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
