許可權管理模塊中動態載入Vue組件
當前後端分離時，許可權問題的處理也和我們傳統的處理方式有一點差異。筆者前幾天剛好在負責一個項目的許可權管理模塊，現在許可權管理模塊已經做完了，我想通過5-6篇文章，來介紹一下項目中遇到的問題以及我的解決方案，希望這個系列能夠給小夥伴一些幫助。本系列文章並不是手把手的教程，主要介紹了核心思路並講解了核心代碼，完整的代碼小夥伴們可以在GitHub上star並clone下來研究。另外，原本計劃把項目跑起來放到網上供小夥伴們查看，但是之前買伺服器為了省錢，內存只有512M，兩個應用跑不起來(已經有一個V部落開源項目在運行)，因此小夥伴們只能將就看一下下面的截圖了，GitHub上有部署教程，部署到本地也可以查看完整效果。
項目地址：https://github.com/lenve/vhr
前面幾篇文章，我們已經基本解決了服務端的問題，並封裝了前端請求，本文我們主要來聊聊登錄以及組件的動態載入。
本文是本系列的第五篇，建議先閱讀前面的文章有助於更好的理解本文：
登錄狀態保存
當用戶登錄成功之後，需要將當前用戶的登錄信息保存在本地，方便後面使用。具體實現如下：
登錄成功保存數據
在登錄操作執行成功之後，通過commit操作將數據提交到store中，核心代碼如下：
store
store的核心代碼如下：
為了減少麻煩，用戶登錄成功後的數據將被保存在localStorage中（防止用戶按F5刷新之後數據丟失），以字元串的形式存入，取的時候再轉為json。當用戶註銷登陸時，將localStorage中的數據清除。
組件動態載入
在許可權管理模塊中，這算是前端的核心了。
核心思路
用戶在登錄成功之後，進入home主頁之前，向服務端發送請求，要求獲取當前的菜單信息和組件信息，服務端根據當前用戶所具備的角色，以及角色所對應的資源，返回一個json字元串，格式如下：
前端在拿到這個字元串之後，做兩件事：1.將json動態添加到當前路由中;2.將數據保存到store中，然後各頁面根據store中的數據來渲染菜單。
核心思路並不難，下面我們來看看實現步驟。
數據請求時機
這個很重要。
可能會有小夥伴說這有何難，登錄成功之後請求不就可以了嗎？是的，登錄成功之後，請求菜單資源是可以的，請求到之後，我們將之保存在store中，以便下一次使用，但是這樣又會有另外一個問題，假如用戶登錄成功之後，點擊某一個子頁面，進入到子頁面中，然後按了一下F5進行刷新，這個時候就GG了，因為F5刷新之後store中的數據就沒了，而我們又只在登錄成功的時候請求了一次菜單資源，要解決這個問題，有兩種思路：1.將菜單資源不要保存到store中，而是保存到localStorage中，這樣即使F5刷新之後數據還在；2.直接在每一個頁面的mounted方法中，都去載入一次菜單資源。
由於菜單資源是非常敏感的，因此最好不要不要將其保存到本地，故捨棄方案1，但是方案2的工作量有點大，因此我採取辦法將之簡化，採取的辦法就是使用路由中的導航守衛。
路由導航守衛
我的具體實現是這樣的，首先在store中創建一個routes數組，這是一個空數組，然後開啟路由全局守衛，如下：
這裡的代碼很短，我來做一個簡單的解釋：
1.如果要去的頁面是登錄頁面，這個沒啥好說的，直接過。
2.如果不是登錄頁面的話，我先從store中獲取當前的登錄狀態，如果未登錄，則通過路由中meta屬性的requireAuth屬性判斷要去的頁面是否需要登錄，如果需要登錄，則跳回登錄頁面，同時將要去的頁面的path作為參數傳給登錄頁面，以便在登錄成功之後跳轉到目標頁面，如果不需要登錄，則直接過（事實上，本項目中只有Login頁面不需要登錄）；如果已經登錄了，則先初始化菜單，再跳轉。
初始化菜單的操作如下：
在初始化菜單中，首先判斷store中的數據是否存在，如果存在，說明這次跳轉是正常的跳轉，而不是用戶按F5或者直接在地址欄輸入某個地址進入的。否則就去載入菜單。拿到菜單之後，首先通過formatRoutes方法將伺服器返回的json轉為router需要的格式，這裡主要是轉component，因為服務端返回的component是一個字元串，而router中需要的卻是一個組件，因此我們在formatRoutes方法中動態的載入需要的組件即可。數據格式準備成功之後，一方面將數據存到store中，另一方面利用路由中的addRoutes方法將之動態添加到路由中。
菜單渲染
最後，在Home頁中，從store中獲取菜單json，渲染成菜單即可，相關代碼可以在中查看，不贅述。
OK，如此之後，不同用戶登錄成功之後就可以看到不同的菜單了。
關注公眾號，可以及時接收到最新文章:
TAG:玩轉JavaEE |