vue-router如何實現權限控制

這篇文章主要講解了“vue-router如何實現權限控制”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue-router如何實現權限控制”吧！

在vue-router控制前端權限是常見需求：

1. 有一種做法是直接在后端完成判斷，提供頁面列表和操作列表，在前端進行渲染，但這個方案并不優雅，前后端耦合度比較高。

2. 比較常見的做法是把登錄頁面獨立在router之外，專門寫一個權限控制文件，在登錄之后根據用戶權限加載router，之后把權限作為參數傳入各種組件中，以控制元素的渲染。這個方法比較合理，沒有什么額外的開銷，只是需要獨立寫一個登錄頁面和權限控制文件比較麻煩一些，特別是對一些小項目而言。

我們希望還有更簡單的方式。這個時候梳理一下需求，我們的主要目標是：

1. 菜單欄控制，根據權限渲染可以進入的頁面菜單；

2. 操作按鈕權限控制，沒有操作權限的不予顯示；

3. 如果有人通過直接點擊鏈接或輸入地址進入沒有權限的頁面，則進行攔截；

第一、第二個目標是容易實現的，把權限列表傳入對應組件，通過v-if判斷即可，需要解決的是越權頁面的攔截問題。在上面常見的做法中，為了實現攔截，單獨寫了一個登錄頁面，登錄之后再根據權限加載路由，這樣，沒有權限的路由根本不會加載，于是被導向404頁面。

那么，現在的問題是，怎么樣會有更簡單的方式？

顯然，如果我們不想單獨寫login頁面，那么router在登錄前就完成加載了。如果無法通過router自動將越權頁面導向404頁面，我們能做的，只能手動引導了。思路清楚了，實現起來就毫無壓力：

根據vue組件的生命周期，我們可以在mounted鉤子上進行權限判斷，如果通過props傳入的用戶權限列表沒有對應權限，就跳轉頁面到404：

mounted () {
     if (!this.check_user_privilege (current_page)) {
       this.$Message.error('權限不足');
       this.$router.push('404');
     }
 }

當然，事實上vue-router也提供了頁面跳轉時的鉤子方法，全局的有beforeEach、afterEach等，我們希望直接在組件內使用，則可以使用beforeRouteEnter方法，在進入頁面時進行判斷，比如：

beforeRouteEnter (to, from, next) {
     next(vm => {
       if (!vm.check_user_privilege (current_page)) {
         vm.$Message.error('權限不足');
         vm.$router.push('404');
       }
     })
   },

當然，就這個例子來說，用vue-router提供的鉤子還不如直接在mounted寫判斷條件，因為beforeRouteEnter方法中的next需要調用組件參數，是在mounted執行之后才執行的，而我們又經常需要在mounted鉤子加載頁面數據，為了避免浪費，先進行判斷是比較好的。

和常用方法相比，簡單方法是有額外開銷的，主要在于需要完全加載路由，同時在加載頁面后進行了一次判斷。不過從寫代碼的角度來說，似乎邏輯上更節約，因為不用另外寫一個集中進行權限控制的文件了，至于每個頁面的權限判斷，那是本來在菜單欄就要做的事情，延伸到不同頁面也不算什么負擔。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

感謝各位的閱讀，以上就是“vue-router如何實現權限控制”的內容了，經過本文的學習后，相信大家對vue-router如何實現權限控制這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！