總體思路：
1.用戶填寫完賬號和密碼后向服務端驗證是否正確，驗證通過之后裆蒸，服務端會返回一個token痢站。
2.拿到token之后將這個token存起來谒拴，保證刷新頁面后能記住用戶登錄狀態(tài)撤奸，根據(jù)token去調用userInfo的接口來獲取用戶的詳細信息（如用戶權限，用戶名等等信息）傲隶。
3.權限驗證：通過token獲取用戶對應的權限饺律，將請求的權限數(shù)組和用戶信息存儲到vuex中 ，動態(tài)根據(jù)用戶的權限通過處理得到其對應有權限的路由跺株，通過 router.addRoutes 動態(tài)添加這些路由复濒。
一、登錄：
登錄成功后乒省，服務端會返回一個 token（該token的是一個能唯一標示用戶身份的一個key）巧颈，之后我們將token存儲在本地localstorage之中，這樣下次打開頁面或者刷新頁面的時候能記住用戶的登錄狀態(tài)袖扛，不用再去登錄頁面重新登錄了砸泛。
涉及的安全性問題：
為了保證安全性，后臺所有token有效期(Expires/Max-Age)都是Session蛆封，就是當瀏覽器關閉了就丟失了唇礁。重新打開瀏覽器都需要重新登錄驗證，后端也會在每周固定一個時間點重新刷新token惨篱，讓后臺用戶全部重新登錄一次盏筐，確保后臺用戶不會因為電腦遺失或者其它原因被人隨意使用賬號。
二砸讳、攔截路由進行判斷
用戶登錄成功之后琢融，我們會在全局鉤子router.beforeEach中攔截路由楷拳，判斷是否已獲得token，在獲得token之后我們就要去獲取用戶的基本信息了
頁面會先從 localstorage中查看是否存有 token吏奸，沒有，就走一遍上一部分的流程重新登錄陶耍，如果有token,就會把這個 token 返給后端去拉取user_info奋蔚，保證用戶信息是最新的。 當然如果是做了單點登錄得的的話烈钞，用戶信息存儲在本地也是可以的泊碑。當你一臺電腦登錄時，另一臺會被提下線毯欣，所以總會重新登錄獲取最新的內容馒过。
三、權限控制
前端會有一份路由表酗钞，它表示了每一個路由可訪問的權限腹忽。當用戶登錄之后，通過 token 獲取用戶的 role 砚作，動態(tài)根據(jù)用戶的 role 算出其對應有權限的路由窘奏，再通過router.addRoutes動態(tài)掛載路由。但這些控制都只是頁面級的葫录，說白了前端再怎么做權限控制都不是絕對安全的着裹，后端的權限驗證是逃不掉的。
前端控制頁面級的權限米同，不同權限的用戶顯示不同的側邊欄和限制其所能進入的頁面(也做了少許按鈕級別的權限控制)骇扇，后端則會驗證每一個涉及請求的操作，驗證其是否有該操作的權限面粮，每一個后臺的請求不管是 get 還是 post 都會讓前端在請求 header里面攜帶用戶的 token少孝，后端會根據(jù)該 token 來驗證用戶是否有權限執(zhí)行該操作。若沒有權限則拋出一個對應的狀態(tài)碼但金，前端檢測到該狀態(tài)碼韭山，做出相對應的操作。
四冷溃、利用vuex管理路由表钱磅，根據(jù)vuex中可訪問的路由渲染側邊欄組件。
具體實現(xiàn)：
1.創(chuàng)建vue實例的時候將vue-router掛載似枕，但這個時候vue-router掛載一些登錄或者不用權限的公用的頁面盖淡。
2.當用戶登錄后，獲取用role凿歼，將role和路由表每個頁面的需要的權限作比較褪迟，生成最終用戶可訪問的路由表冗恨。
3.調用router.addRoutes(store.getters.addRouters)添加用戶可訪問的路由。
4.使用vuex管理路由表味赃，根據(jù)vuex中可訪問的路由渲染側邊欄組件掀抹。
