Vue動態匹配路由及使用者許可權過濾

這個研究了大半天了，由於對vue不是很熟悉，所以走了很多彎路，這裡記錄一下開發步驟，參考鏈結

思路使用者登入，獲取token，把token存入cookie

使用router.beforeeach

判斷使用者是否已經拉取使用者資訊，如果沒有，則拉取使用者資訊

根據token獲取使用者可訪問的路由表

動態新增可訪問路由表

具體步驟和**展示

user.js

import

from '@/api/login'
import
from '@/utils/auth'
import qs from 'qs'
const user =
, mutations:
, set_name:
(state, name)
=>
, set_roles:
(state, roles)
=>
, set_router:
(state, asyncroutermap)
=>},
actions:
, userinfo)
)login
(params)
.then
(response =
>).
catch
(error =
>)}
)},// 獲取使用者資訊
getinfo()
commit
('set_name'
, data.name)
resolve
(response)})
.catch
(error =
>)}
)},// 登出
logout()
).catch
(error =
>)}
)},}
}export default user

import router from './router'

import store from './store'
import nprogress from 'nprogress'
// progress 進度條
import
'nprogress/nprogress.css'
// progress 進度條樣式
import
from 'element-ui'
import
from '@/utils/auth'
// 驗權
nprogress.
configure()
// 許可權判斷方法
function haspermission
(roles, permissionroles)
// 不重定向白名單
const whitelist =
['/login'
]router.
beforeeach
((to, from, next)
=>
)// if current page is dashboard will not trigger aftereach hook, so manually handle it
nprogress.
done()
}else)}
)}).
catch
((err)
=>)}
)})}
else
else)}
}}}else
else
`) nprogress.
done()
}}})
router.
aftereach((
)=>
)

import

from '@/router'
import syspermissionapi from '@/api/merchant/syspermission.api'
import layout from '../../views/layout/layout'
import vue from 'vue'
function filterroutes
(routers)}if
(obj.component !==''
)`))}
else
// 需要遞迴
if(obj.children.length >0)
routertree.
push
(newobj)
}return routertree
}const permission =
, mutations:
, set_addroutes:
(state, routers)
=>},
actions:
, token))}
)}}}
export default permission

export default

(vue)
=>
}else}}
)}

],

"component": "",
"hidden": 1,
"icon": "",
"meta": "",
"name": "merchant",
"path": "/merchant",
"redirect": "/merchant",
"title": "基礎設定"
}],"message": "success"
}

使用者角色頁面

角色分配頁面

vue動態路由匹配

我們經常需要把某種模式匹配到的所有路由，全都對映到同個元件。例如，我們有乙個user元件，對於所有 id 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在vue router的路由路徑中使用動態路徑引數來達到這個效果 這是公共的元件 dynamicroutedemo.vue 我是公共的元件...

vue 動態路由匹配 路由元件傳遞引數

動態路由匹配 動態路由匹配的基本使用 當我們需要許多類似路由 例如使用者介面，不同使用者登入的介面不相同 就需要寫許多基本相同的路由，這個時候我們就可以使用動態路由來解決這個問題。應用場景 通過動態路由引數的模式進行路由的匹配 在通過路由設定完成後，通過 router.params獲取路由的引數 v...

vue 許可權管理 動態路由（6）

1.動態生成路由 import vue from vue import router from vue router import nprogress from nprogress progress bar import nprogress nprogress.css progress bar st...