❶ 前端許可權控制-基於vue-router的動態路由實現
在中後台應用系統開發中，大部分情況下會涉及到用戶許可權控制，除了後端做許可權驗證外，前端在用戶訪問時也需要基於用戶許可權做相應控制。針對前端使用vue框架的情況，對頁面一級的許可權控制，常規處理是在頁面導航欄通過控制導航顯隱控制許可權，但在瀏覽器地址欄輸入訪問路徑依然可以訪問，可以用vue-router的動態路由來實現許可權控制。
登錄成功後通過addRoutes更新路由配置
正常情況下這樣就可以實現動態路由控制了，但刷新頁面發現會出現404，因為刷新時vue實例重新初始化了，導致動態路由被還原成默認路由，此時需要將許可權碼存儲在本地，在main.js中根據許可權碼重新生成動態路由
以上步驟基本可以實現動態添加路由並在刷新頁面是維持路由狀態，但訪問根路徑會始終跳轉到登錄頁，無法默認跳轉到首頁，這個問題目前還未想到好的解決方案。
❷ vue 項目路由許可權管理實現
項目基於 vue-element-admin 基礎之上進行開發，感謝 花褲衩 以及為此項目做出貢獻的大佬 [社會社會]！
路由數據由後端控制，前端調用介面返回數據；前端拿到數據處理成可使用的路由結構，然後渲染到頁面。
為了能提供更多的功能，後端返回的數據結構是在原來菜單結構基礎之上有所改動的。
原路由數據結構：
後端返回數據結構：
路由數據採用多級嵌套結構，基本可以滿足需求。
拿到介面返回的數據之後還不能直接使用，需要經過一些處理。
在本地的開發，新增頁面時，為了方便開發，獲取到後端返回的數據之後用了一個方法來合並數據：
temporaryMenuArray 臨時路由數組的結構需要跟後端返回的數據結構一致。
使用 setTemporaryMenu :
合並完臨時的路由之後就開始進行路由的處理了。
從上面後端返回的數據結構中可以看出，已經和需要處理成的路由很像了，但還是有一些數據沒有必要在專門的系統那裡維護，所以需要一些其他數據的皮穗沒處理：
routesComponents 為一個手動維護的頁面路由文件：
得到的 userCanUseRouteMoles 結構如下：
上面數據中的 type 為2、3層級的 component 已經被替換成對應頁面的路由模塊了。
得到 userCanUseRouteMoles 之後，其中 name 為 storeManagement:head 的那一層數據是供頭部菜單使用的，其 children 的數據才是需要添加的路由數據：
此時的 asyncRoutes 只放了默認匹配的路由，這個是需要放在所有路由的最後的：
至此對路由的處理結束。
處理路由這一步是放在 router.beforeEach 路由全局前置守衛里的，結合原有的邏輯進行了一些判斷處理。
因為路由數據是由後端數據處理得到的，只包含和掛載了當前用戶能有許可權訪問的部分，沒有權燃納限訪問的路由就沒有被 router.addRoutes 添加，所以並沒有在路由守衛里對每次路由的跳轉都進行校族陪驗。
❸ 前端許可權控制
前端許可權控制分為四個方面的控制
第一點界面控制：用戶還未登入就能通過url訪問到系統頁面，該問題比較好解決通過路由守衛即可判斷。
如果用戶登入以後用url訪問不是屬於自己的菜單頁，如我沒有系統管理這個界面，我去地址欄輸入系統管理這個頁面的url，前端因該阻止它訪問頁面。輸入url能訪問到頁面的原因是你的路由配置了這個地址，所以控制界面的方式就是從路由入手，前期我們配置大家都有的路由，其他的路由根據登入系統時後台返回的許可權列表數據，動態添加路由。
在登入時我們把許可權數據存入vuex中並本地化，通過路由對象可以獲取到路由的配置，把那個用戶的路由單獨添加到路由列表中，使用addroutes添加更改後到路由配置，添加動態路由的方法調用在app.vue的created中，因為每次載入頁面都會調用該方法。
第二菜單控制:
根據用戶的不同菜單欄也不同，該問題跟動態路由類似登入時拿到數據存入vuex中並本地化，之後在菜單組件列表循環遍歷出對應的菜單欄，過於簡單就不截圖了。
第三按鈕控制：
這個控制可以採用自定義組件的方式，例如這個用戶沒有添加人員的按鈕，他只有查看這個人員菜單的許可權。在頁面上按鈕都添加上，但是是否能顯示則根據後端傳過來的許可權數據，該數據在動態路由作為meta數據添加在路由上了，也就是用路由的meta的數據去判斷這個按鈕是否顯示或者禁用或是可用，在頁面我們添加按鈕我們就加一個action屬於為add，我們或者add去比較如果沒有add這個許可權如果處理。上圖
第四請求攔截
請求攔截並不簡單的做一個token，而是每個用戶對應可以操作的請求放行，不是他可以操作的攔截，如他沒有添加的請求則要攔截，前面不是做了按鈕的控制嗎，為啥還要做這個攔截，按鈕控制並不安全，其實他可以通過瀏覽器直接修改按鈕的屬性，有人又說有token了不是可以攔截了嗎，對，可以攔截不過那時後台攔截，你請求還是發過去了，請求影響系統性能，所以做這個還是有必要的。
請求攔截，根據名字就知道他是在請求攔截器里設置的，在攔截器中可以獲取請求方式，根據請求方式與路由中的mate許可權對比有就發送請求，如果沒有則不發請求
❹ vue 動態路由/路由許可權 解決方案
路由許可權思路：
1.菜單欄/導航欄(一級許可權)
在登錄成功後，獲取後端的許可權數據, 根據鉛扮許可權數據，展示對應的路由導航或菜單即可;
2.界面的控制
如果用戶沒有登錄, 用戶手動在地址欄輸入路由地址，則需要跳轉到登錄界面.
如果用戶已經登錄, 用戶手動輸入的非許可權內的路由地址，則給他跳轉到404界面.
3.按鈕的搭游控制(二級許可權)
在頁面中，有些賬號有: 添加，刪除，修改，增加等許可權, 有些沒有.
沒有許可權的賬號在這個頁面只是可以瀏覽頁面中的數據，需要對這些按鈕 禁用or隱藏。
4.請求和響應的控制 （這一步其實後端也會根據token判斷身份信息, 來返回數據，可以省略）
如果用戶通過非常規的手段(可能是同行), 比如通過瀏覽器f12將禁用的按鈕disabled 改成false, 隱藏的按鈕apacity:0改成了1，這些按鈕就可以使用了，此時需要對按鈕點擊後發出的請求作出攔截.
login.vue
home.vue (elment-ui)
側邊導航欄
store.js
router.js
動態路需知激銷兩個地方調用:
1 login.vue 中登錄成功後立即執行動態路由函數
2 app.vue中, 在根組件中添加執行動態路由函數，這樣每一次用戶刷新，就會執行，否則刷新之後，動態路由就沒了
思路3：按鈕的控制(二級許可權): 這里我是通過 自定義指令來實現 對按鈕(增,刪,改等二級許可權按鈕) 的顯示隱藏。
更簡單直接的方式，直接就在html中對button添加v-if顯示隱藏即可
import './utils/permission.js' --> main.js中引入文件, 嫌麻煩直接在main.js中寫
4 伺服器返回狀態碼401, 代表token超時 or token被串改 or 未傳token, 此時強制跳轉到登錄頁重新登錄
❺ vue 按鈕 許可權控制
在日常項目中，會碰到需要根據後台介面返回的數據，來判斷當前用戶的操作許可權。必須當有刪除許可權時，就顯示刪除按鈕。沒有這個許可權時，就不顯示或者刪除這個按鈕。通過查找資料，通過vuex來實現這個功能。
在 state 中創建 buttomPermission ，用於保存後台介面返回的許可權數據。
setPermission 用於接受數據，將頁面許可權管理傳入到 buttomPermission 對象中。
新建 directives 文件夾，創建 permission.js 文件。
這里使用 inserted 函數，在被綁定元素插入父節點時檢測該元素是否有許可權。
在按鈕猜襪頁面引入和定義 permission指令，並且在buttom中寫入指令，綁定指令中相對於的值。
在 permission 指令,通過 bindings 獲取該按鈕綁定的value值，然後在 buttomPermission 對象中找到，然後判斷是否有許可權，如果沒有許可權，則刪除穗兄激該節點。
將狀態管理數據，通過 setPermission 方法傳入到許可權管理中
總的來說，就是通過 vuex 定義一個 buttomPermission 許可權狀態對象，然後再創建一個 permissions 指令，通過對每個 buttom 按鈕使用 permissions 指令，並且綁定該按塵正鈕特定意義的值。然後在 permission.js 文件中，獲取當前 value 值，從 buttomPermission 中得到當前按鈕是否有許可權，沒有則直接刪除掉當前按鈕節點。
❻ vue項目許可權管理
首先，許可權管理 般需求是兩個： 許可權和按鈕許可權。
前端 案會把所有路由信息在前端配置，通過路由守衛要求 戶登錄， 戶登錄後根據 過濾出路由表。 如我會配置 個 asyncRoutes 數組，需要認證的 在其路由的 meta 中添加 個 roles 欄位，等獲取 戶 之後取兩者的交集，若結果不為空則說明可以訪問。此過濾過程結束，剩下的路由就是該 戶能訪問的 ，最後通過 router.addRoutes(accessRoutes) 式動態添加路由即可。
後端 案會把所有 路由信息存在資料庫中， 戶登錄的時候根據其 查詢得到其能訪問的所有 路由信息返回給前端，前端再通過 addRoutes 動態添加路由信息。
按鈕許可權的控制通常會實現 個指令，例如 v-permission ，將按鈕要求 通過值傳給v-permission指令，在指令的 moutned 鉤 中可以判斷當前 戶 和按鈕是否存在交集，有則保留按鈕， 則移除按鈕。
路由守衛 permission.js ：
路由 成## permission.js ：
動態追加路由## permission.js ：
服務端返回的路由信息如何添加到路由器中？
❼ 如何通過界面修改左側菜單欄許可權vue
要通過Vue的前端界面修改左側菜單欄的許可權，您可以將菜單項數據存儲在Vue組件的data屬性中，並讓稿姿根據用戶不同的許可權來動態設置菜單的顯示方式。具體步驟如下：
1. 在Vue組件中創建一個data屬性，用來存儲菜單項的數據。例如：
```
data() {
return {
menuItems: [
{ name: '儀表盤', icon: 'el-icon-menu', path: '/dashboard', canView: true },
{ name: '用戶管理', icon: 'el-icon-user', path: '/users', canView: false },
{ name: '文章管理', icon: 'el-icon-document', path: '/article', canView: true }
]
}
}
```
2. 使用v-for循環渲染menuItems數組中的菜單項，並使用v-if根據canView屬性動態設置菜單項的顯示方式。例如：
```
<el-menu>
<el-menu-item v-for="item in menuItems" :key="item.path" v-if="item.canView">
<i :class="item.icon"></i>
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</el-menu>
```
在這個示例中，只有canView屬性為true的坦絕菜單項才會被渲染出來。
3. 在Vue組件的methods屬性中添加一個方法，用來在界面上修改菜單項的許可權。例如：
```
methods: {
changeMenuView(item) {
item.canView = !item.canView;
}
}
```
在這個示例中，changeMenuView方法會根據傳入的菜單項item對象的canView屬性值進行取反操作，實現菜單項許可權的修改。
完成上述操作後，您就可以通過界面修改菜單項的許可權，從而實現動態顯示和隱藏的效果。這種方法可以使應用程序更加靈活，便於根據用戶角色對菜單敬蠢進行動態控制。