項目是越寫越多，遇到的各種需求當然也逐漸增多。
在一個項目中，實現用戶權限，似乎也成了必然。
一直以來，我也知道可以通過vue-router官方提供的一個api-->addRoutes可以實現路由添加的功能，事實上就也就實現了用戶權限。
然而，看到官方文檔的介紹，似乎也沒辦法理解怎么個用法。
官方介紹：
函數簽名：
router.addRoutes(routes: Array<RouteConfig>)動態添加更多的路由規則。參數必須是一個符合 routes 選項要求的數組。
就這么一句話，誰能跟我告訴我，我應該怎么用。
所以，一直也沒有使用addRoutes來實現用戶的鑒權。
近段時間，在整理項目中會常用的一些功能，認為有必要把用戶鑒權[addRoutes]撿起來研究一下了。
真正的沉下心來研究的時候，其實也真沒什么，似乎也就那么回事。怎么就拖了這么久了。。。
邏輯上，我們該怎么配置路由，還是怎么配置路由，唯一需要注意的地方在於，如果幾條路由對用戶權限有要求，那么就該稍微謹慎點了。
舉個例子來說，系統上，一般情況下會有一個“用戶管理”的模塊，然而該模塊並不需要對所有用戶開放，僅僅具有“管理員”權限的用戶才能看到該頁面，並且進行操作。
那么，如果從源頭上掐死，也就是確定是否配置該路由，那就直接確定下來用戶是否能夠看到該模塊了。
基本上也就那么幾種方法，常見的有：
export const asyncRoute = [
{
path: '/users',
name: 'Users',
component: () => import('@/views/Users'),
meta: {
title: '用戶管理',
icon: 'user'
}
}
]
直接單獨配置，然后確定用戶是否擁有該權限，利用數組方法concat拼接到其他路由配置當中。
let rs = routes
if (+id === 1) { // id為1時，該用戶擁有所有權限
rs = routes.concat(asyncRoute)
}
亦或者，在meta屬性里面添加參數以確定是否需要鑒權：
[
{
path: '/home',
name: 'Home',
component: () => import('@/views/Home'),
meta: {
title: '首頁',
icon: 's-home'
}
},
{
path: '/monitor',
name: 'Monitor',
component: () => import('@/views/Monitor/Ing'),
meta: {
title: '設備狀態監測',
icon: 'monitor'
}
},
{
path: '/users',
name: 'Users',
component: () => import('@/views/Users'),
meta: {
title: '用戶管理',
icon: 'user',
auth: true
}
}
]
比如這種，然后在頁面當中利用數組方法filter進行過濾。擁有所有權限，就直接使用，如果沒有用戶管理的權限，那就過濾掉auth為true的選項。
const routes = [].filter(item => !item.meta.auth)
不管怎么判斷，只要區分出具體的權限，剩下的就是官方文檔的示例了：
Router.addRoutes([...routes])
這里寫上解構，主要是為了強調，addRoutes的參數一定是一個數組，也就是我們在router.config.js文件中配置的數組，格式完全一樣。
到這里基本上鑒權就完成了。
需要注意的是，在哪里實現鑒權，可以覆蓋到所有組件的.vue文件當中，或者單獨寫一個peimission.js的文件，類似於vue-element-admin的做法。
一定不能僅僅是在點擊“登錄”按鈕之后做鑒權，畢竟刷新頁面也是常見操作。