vue中權限控制動態路由的創建流程（圖文）

vue到后面版本增加router.addRoutes的函數，使得可以創建路由表，先上流程圖

流程重點：在于跳轉頁面的時候 有沒有 動態路由
流程解說：

1. 進入網頁的時候，首先創建一部分靜態路由表，這份靜態路由表里面包含登錄頁面，這是保證輸入url的時候有頁面可以訪問

2. 登錄后，從服務器拉取登錄用戶的訪問權限的列表，保存到sessionstorage

3. 在 router.beforeEach鉤子函數里面 判斷有沒有 動態路由表（此函數是路由跳轉前運行的函數）

4. 在鉤子函數里面判斷有沒有動態路由表，有就進行頁面跳轉，沒有就創建動態路由表

5. 假如sessionstorage里面沒有存路由信息，則跳轉回登錄頁面重新登錄獲取路由信息

重點解說：

1. 從服務器拉取角色的路由表，本地存一份總路由表，在跟服務器拉取的路由表進行篩選，最后保存篩選過后的到sessionstorage

2. 頁面每次跳轉的時候，判斷有沒有動態路由表，沒有的話去新建路由表

源碼：

相關文章推薦：

vue指令與$nextTick操作DOM有什么區別?

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com