前端權(quán)限控制分為四個(gè)方面的控制
第一點(diǎn)界面控制：用戶還未登入就能通過(guò)url訪問(wèn)到系統(tǒng)頁(yè)面，該問(wèn)題比較好解決通過(guò)路由守衛(wèi)即可判斷戈毒。
如果用戶登入以后用url訪問(wèn)不是屬于自己的菜單頁(yè)，如我沒(méi)有系統(tǒng)管理這個(gè)界面横堡，我去地址欄輸入系統(tǒng)管理這個(gè)頁(yè)面的url埋市，前端因該阻止它訪問(wèn)頁(yè)面。輸入url能訪問(wèn)到頁(yè)面的原因是你的路由配置了這個(gè)地址命贴，所以控制界面的方式就是從路由入手道宅，前期我們配置大家都有的路由，其他的路由根據(jù)登入系統(tǒng)時(shí)后臺(tái)返回的權(quán)限列表數(shù)據(jù)胸蛛，動(dòng)態(tài)添加路由污茵。
在登入時(shí)我們把權(quán)限數(shù)據(jù)存入vuex中并本地化，通過(guò)路由對(duì)象可以獲取到路由的配置葬项，把那個(gè)用戶的路由單獨(dú)添加到路由列表中泞当，使用addroutes添加更改后到路由配置，添加動(dòng)態(tài)路由的方法調(diào)用在app.vue的created中民珍，因?yàn)槊看渭虞d頁(yè)面都會(huì)調(diào)用該方法襟士。
第二菜單控制:
根據(jù)用戶的不同菜單欄也不同，該問(wèn)題跟動(dòng)態(tài)路由類似登入時(shí)拿到數(shù)據(jù)存入vuex中并本地化嚷量，之后在菜單組件列表循環(huán)遍歷出對(duì)應(yīng)的菜單欄陋桂，過(guò)于簡(jiǎn)單就不截圖了。
第三按鈕控制：
這個(gè)控制可以采用自定義組件的方式蝶溶，例如這個(gè)用戶沒(méi)有添加人員的按鈕嗜历，他只有查看這個(gè)人員菜單的權(quán)限。在頁(yè)面上按鈕都添加上抖所，但是是否能顯示則根據(jù)后端傳過(guò)來(lái)的權(quán)限數(shù)據(jù)梨州，該數(shù)據(jù)在動(dòng)態(tài)路由作為meta數(shù)據(jù)添加在路由上了，也就是用路由的meta的數(shù)據(jù)去判斷這個(gè)按鈕是否顯示或者禁用或是可用部蛇，在頁(yè)面我們添加按鈕我們就加一個(gè)action屬于為add摊唇，我們或者add去比較如果沒(méi)有add這個(gè)權(quán)限如果處理。上圖
第四請(qǐng)求攔截
請(qǐng)求攔截并不簡(jiǎn)單的做一個(gè)token涯鲁，而是每個(gè)用戶對(duì)應(yīng)可以操作的請(qǐng)求放行巷查，不是他可以操作的攔截，如他沒(méi)有添加的請(qǐng)求則要攔截抹腿，前面不是做了按鈕的控制嗎岛请，為啥還要做這個(gè)攔截，按鈕控制并不安全警绩，其實(shí)他可以通過(guò)瀏覽器直接修改按鈕的屬性崇败，有人又說(shuō)有token了不是可以攔截了嗎，對(duì)，可以攔截不過(guò)那時(shí)后臺(tái)攔截后室，你請(qǐng)求還是發(fā)過(guò)去了缩膝，請(qǐng)求影響系統(tǒng)性能，所以做這個(gè)還是有必要的岸霹。
請(qǐng)求攔截疾层，根據(jù)名字就知道他是在請(qǐng)求攔截器里設(shè)置的，在攔截器中可以獲取請(qǐng)求方式贡避，根據(jù)請(qǐng)求方式與路由中的mate權(quán)限對(duì)比有就發(fā)送請(qǐng)求痛黎，如果沒(méi)有則不發(fā)請(qǐng)求
