您好,登錄后才能下訂單哦!
這篇“vue各種權(quán)限控制與管理實(shí)現(xiàn)的方法是什么”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“vue各種權(quán)限控制與管理實(shí)現(xiàn)的方法是什么”文章吧。
菜單權(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)前 按鈕元素
<el-button v-permission="[$route.path, 'add']">添加</el-button> 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
以上就是關(guān)于“vue各種權(quán)限控制與管理實(shí)現(xiàn)的方法是什么”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。