權(quán)限路由就是根據(jù)登錄的賬號角色的不同返回可操作的頁面不同。當(dāng)前角色可操作的權(quán)限是前后端配合協(xié)同的哎甲。
1.首先搭建一張默認(rèn)的無權(quán)限路由笆载，這里我只寫了一個登錄頁
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
? {
? ? path: '',
? ? redirect: '/login'
? },
? {
? ? path: '/login',
? ? name: 'login',
? ? component: Login
? }
]
export default router
2.創(chuàng)建?dynamicRoutes.js 文件漏益。這里寫動態(tài)添加的權(quán)限路由表
let dynamicRoutes = [
? {
? ? path: '/father',
? ? component: () => {
? ? ? return import('@/views/Father')
? ? },
? ? name: 'father',
? ? meta: {
? ? ? name: '父親'
? ? },
? ? children: [
? ? ? {
? ? ? ? path: 'son',
? ? ? ? component: () => {
? ? ? ? ? return import('@/views/Father/Son')
? ? ? ? },
? ? ? ? name: 'son',
? ? ? ? meta: {
? ? ? ? ? name: '兒子'
? ? ? ? }
? ? ? }
? ? ]
? }
]
export default dynamicRoutes
3.考慮以后可能多個組件會使用到權(quán)限路由數(shù)據(jù)，我們把權(quán)限路由的數(shù)據(jù)和生成權(quán)限路由的方法放到store中掌猛，在下面我只給出action.js里面的方法
import router from '@/router'
import dynamicRoutes from '@/router/dynamicRoutes.js'
// 篩選出有權(quán)限路由
function filterRouter (userRouter = [], allRouter = []) {
? /**
? ? * @param? {Array} userRouter 后臺返回的用戶權(quán)限json
? ? * @param? {Array} allRouter? 前端配置好的所有動態(tài)路由的集合
? ? * @return {Array} realRoutes 過濾后的路由
? */
? let realRoutes = []
? allRouter.forEach(v => {
? ? userRouter.forEach(item => {
? ? ? if (item.name === v.name) {
? ? ? ? // 創(chuàng)建新的對象
? ? ? ? let obj = {
? ? ? ? ? path: v.path,
? ? ? ? ? component: v.component,
? ? ? ? ? name: v.name,
? ? ? ? ? meta: {
? ? ? ? ? ? name: v.meta.name
? ? ? ? ? }
? ? ? ? }
? ? ? ? // 如果后臺返回的有子路由遞歸當(dāng)前方法加入當(dāng)前子路由
? ? ? ? if (item.children && item.children.length > 0) {
? ? ? ? ? obj.children = filterRouter(item.children, v.children)
? ? ? ? }
? ? ? ? realRoutes.push(obj)
? ? ? }
? ? })
? })
? return realRoutes
}
export default {
? // 獲取后臺的路由權(quán)限
? getAsyncRoutes ({ commit }) {
? ? /**
? ? ? * @param? {Array} res 后臺返回的用戶權(quán)限json
? ? */
? ? setTimeout(() => {
? ? ? let res = [
? ? ? ? {
? ? ? ? ? name: 'father',
? ? ? ? ? children: [
? ? ? ? ? ? {
? ? ? ? ? ? ? name: 'son'
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: 'test'
? ? ? ? }
? ? ? ]
? ? ? // 篩選出有權(quán)限路由
? ? ? let menu = filterRouter(res, dynamicRoutes)
? ? ? // 將404頁面加到最后
? ? ? menu = menu.concat([
? ? ? ? {
? ? ? ? ? path: '/404',
? ? ? ? ? name: '404',
? ? ? ? ? meta: {
? ? ? ? ? ? name: '404'
? ? ? ? ? },
? ? ? ? ? component: () => {
? ? ? ? ? ? return import('@/views/NotFound')
? ? ? ? ? }
? ? ? ? },
? ? ? ? {
? ? ? ? ? path: '**',
? ? ? ? ? redirect: '/404'
? ? ? ? }
? ? ? ])
? ? ? // 存入session
? ? ? if (!window.sessionStorage.getItem('menu')) {
? ? ? ? window.sessionStorage.setItem('menu', JSON.stringify(menu))
? ? ? }
? ? ? router.$addRoutes(menu)? ?//?$addRoutes方法是重新封裝的見下方
? ? ? commit(ADDROUTER, menu)
? ? }, 1000)
? }
}
4.防止刷新路由消失和切換角色路由清空重新添加，我們要改造一下router.js里面的內(nèi)容眉睹，以下是最終的router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login'
import store from '@/store'
Vue.use(VueRouter)
const routes = [
? {
? ? path: '',
? ? redirect: '/login'
? },
? {
? ? path: '/login',
? ? name: 'login',
? ? component: Login
? }
]
const router = new VueRouter({
? mode: 'history',
? routes: routes
})
/**
* 為了防止重復(fù)添加路由
* 重新定義$addRoutes,調(diào)用這個方法來添加路由荔茬，這個方法會先重置路由
* 這個路由只會包括非權(quán)限頁，比如登錄頁竹海，再調(diào)用router.addRoutes添加權(quán)限路由
*/
router.$addRoutes = (params) => {
? // 替換現(xiàn)有router的routes
? router.matcher = new VueRouter({ // 重置路由規(guī)則
? ? mode: 'history',
? ? routes
? }).matcher
? router.addRoutes(params) // 添加路由
}
router.onReady(() => {
? // 刷新頁面慕蔚，判斷如果登錄過并且有權(quán)限列表，那么動態(tài)加入權(quán)限路由
? if (window.sessionStorage.getItem('menu')) {
? ? store.dispatch('getAsyncRoutes')
? }
})
export default router
