淺談Vue＆Vue-router如何實現許可權控制

前言

在需要許可權控制的管理系統中，我們經常會看到某些用戶擁有某個菜單，或者某個頁面，而其他用戶則沒有。這就是許可權控制的表現；許可權控制需要結合後台進行管理，後台根據某個用戶身份信息，返回該用戶所擁有的許可權；則主要是使用篩選路由實現許可權顯示對應的模塊與內容

一、配置路由

該文件放在文件夾下，是路由的文件，代碼如下

這是主路由，在還沒登錄時，大家都可能訪問到的路由；還有一個首頁路由需要根據許可權動態注入，動態注入的邏輯代碼放在了文件中。需要動態注入的路由文件我命名為，其中代碼如下:

為首頁的路由與主路由同級，不同用戶的許可權看到的模塊就是中的路由，在許可權篩選的時候回剔除用戶沒有許可權的模塊，剩下的模塊就會顯示到菜單中

二、篩選路由

中篩選路由的關鍵代碼如下：

裡面有個判斷是針對特殊模塊進行處理的；如果本地路由的欄位與伺服器獲取模塊並加上後的欄位相對應，則是允許的路由模塊，然後通過路由的屬性把該路由模塊包含的一些信息傳遞給該路由對應的;

三、注入路由

路由篩選完之後，需要把允許的路由注入到主路由中；注入方式是vue實例中對象的方法：

四、菜單映射

讀取允許的路由列表，將這些路由映射成菜單，每個菜單都會跳轉到對應的路由；每個路由都會展示對應的組件，組件根據路由傳遞的參數顯示不同的內容

至此路由控制許可權基本上已經完成，這裡寫的只是個大概的思路，如果有什麼特殊的路由需求和更加精細的許可權控制，可以在篩選、注入和菜單映射這幾步做文章

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！