許可權是對特定資源的訪問許可，所謂許可權控制，也就是確保使用者只能訪問被分配的資源 而前端許可權總的來說是請求許可權 ，請求的發起可能有下面兩種形式觸發
總的來說 所有的請求發起都觸發自前端路由或試圖 所以我們可以從這兩個方面入手 ，對觸發許可權的源頭進行控制 最終要實現目標是前端許可權控制可以分為 四個方面
axios.interceptors.request.
use(config =>
)axios.interceptors.response.
use(res=>
,=>
})
初始化即掛載全部路由 並且在路上標記響應的許可權資訊 每次路由跳轉前做校驗
const routermap =[,
children:[}
,}]}
]
方案二
初始化的時候先掛載不需要許可權控制路由 比如登入頁 404 等錯誤頁 如果使用者通過 url 進行強制訪問 則會直接進入404 相當與從源頭上做了控制
登入後獲取使用者許可權資訊 然後篩選有權訪問的路由 在全域性路由守衛進行呼叫 addroutes新增路由
import router from
'./router'
import store from
'./store'
import
from
'element-ui'
import nprogress from
'nprogress'
// progress bar
import
'nprogress/nprogress.css'
// progress bar style
import
from
'@/utils/auth'
// gettoken from cookie
nprogress.
configure()
// nprogress configuration
// 許可權判斷功能
function
haspermission
(roles, permissionroles)
// 許可權判斷功能重定向白名單
const whitelist =
['/login'
,'/authredirect'
]router.
beforeeach
((to,
from
, next)
=>
) nprogress.
done()
// 如果當前頁面是dashboard，則每次鉤子後都不會觸發，所以請手動處理它
}else).
then((
)=>
)// hack方法 確保addroutes已完成 ,設定replace:true，這樣導航就不會留下歷史記錄})
}).catch
((err)
=>)}
)})}
else
else})
}// 可刪 ↑}}
}else
else}}
)router.
aftereach((
)=>
)
這種方式存在以下的缺點：
選單許可權可以理解成將頁面與路由進行解耦
方案一、
選單與路由分離 選單由後端返回
前端定義路由資訊
name字段不能為空 需要根據此字段與後端返回選單做關聯 後端返回的選單資訊中必須要有name 對應的字段 並且做唯一性校驗
全域性路由守衛裡做判斷
function
haspermission
(router, accessmenu)
let menu = util.
getmenubyname
(router.name, accessmenu);if
(menu.name)
return
false;}
router.
beforeeach
(async
(to,
from
, next)
=>)}
else
)//選單許可權更新完成,重新進一次當前路由}}
catch(e
)else}}
else)}
else
else)}
}}}else
else
}let menu = util.
getmenubyname
(to.name, store.getters.accessmenu)
; util.
title
(menu.title);}
);router.
aftereach
((to)
=>
);
name與路由的name一一對應的 而後端返回的選單就已經是經過許可權過濾的
如果路由很多 可以在應用初始化的時候 只掛載不需要許可權的路由 取得後端返回的選單後 根據選單與路由的對應的關係 刷選出可以訪問的路由 通過addroutes動態掛載
這種方式的缺點：
* 選單需要與路由一一對應 前端新增了新功能 需要通過選單管理功能新增新的選單 如果選單配置的不對會導致應用不能正常使用
* 全域性路由守衛裡 每次路由跳轉都要做判斷
方案二、
選單和路由都由後端返回
前端統一定義路由元件
const
home=(
)=>
import
("../pages/home.vue");
const
userinfo=(
)=>
import
("../pages/userinfo.vue");
export
default
;
[
,]
addroutes動態掛載之間 需要將資料處理一下 將 component欄位換為真正的元件
如果有巢狀路由 後端功能設計的時候 要注意新增相應的字段 前端拿到資料也要做相應的處理
這種方法也存在缺點：
* 全域性路由守衛裡 每次路由跳轉都要做判斷
* 前後端的配合要求更高
方案一、
按鈕許可權也可以用 v-if 判斷
但是如果頁面過多 每個頁面 都要獲取使用者許可權 role 和路由表裡 meata.btnpermissions 然後判斷
方案二
通過自定義指令 進行按鈕許可權的判斷
首先配置路由
,//頁面需要的許可權
children:
[//頁面需要的許可權},
//頁面需要的許可權}]
}
import vue from
'vue'
/**許可權指令**/
const has = vue.
directive
('has'
,elseif(
!vue.prototype.
$_has
(btnpermissionsarr))}
});// 許可權檢查方法
vue.prototype.
$_has
=function
(value)
if(value.
indexof
(btnpermissionsstr)
>-1
)return i***ist;};
export
'editclick' type=
"primary" v-has>編輯<
/el-button>
許可權需要前後端結合，前端盡可能的去控制，更多的需要後台判斷
vue 後台系統許可權管理
最近在做乙個後台管理系統，一般的後台系統都有許可權管理這塊，下面我就分享下我實現許可權管理這塊的思路。首先說下這個系統前端用到的技術棧，vue全家桶,element ui,axios。首先，使用者的許可權是通過前端來進行配置的，那麼就需要乙個頁面去進行使用者的許可權配置。在使用者登入之後，通過請求後...
Vue 後台管理專案13 許可權管理實現
1.1 完成roles元件靜態布局 elemenet元件 table 展開行 通過設定 type expand 和 scoped slot 可以開啟展開行功能，el table column 的模板會被渲染成為展開行的內容，展開行可訪問的屬性與使用自定義列模板時的 scoped slot 相同。傳送...
後台許可權管理
許可權 檔案，在main.js中引入 用法 許可權按鈕 import vue from vue const has vue.directive has if haspermisssion isshowbutton if haspermisssion isshowbutton 許可權檢查方法 vue....