Vue2.x - Vue Router - 接口动态路由

思路分析

在用户登录后，请求路由接口，动态生成路由（当前角色有权限看到的路由），然后重新导航到当前路由。

代码片段一

// router/index.js

// 将路由拆分成 3 组。分别是：共有路由、权限路由、末尾路由
export const constantRoutes = []	// 共有路由
export const adminRoutes = []		// 权限路由
export const endRoutes = []	        // 末尾路由（404，403等）

const createRouter = () => {
    new Router({
        scrollBehavior: () => ({ y: 0 }),
        routes: constantRoutes
    })
}

const router = createRouter();

// 解决 vue 路由只能添加路由 addRoutes([])，无法删除路由的问题
export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher	// reset router
   	// 初始化为最初的路由
    router.options.routes = constantRoutes
}

export default router

代码片段二

// permission.js

import router, {adminRoutes, endRoutes} from "./router"
import store from "./store"
import { Message } from "element-ui"
import { Nprogress } from "nprogress"
import { getToken } from "xxxx"
import getPageTitle from "utils/xxxx"

Nprogress.configure({ showSpinner: false })

const whhiteList = ["/login"] 		// 路由白名单

router.beforeEach(async(to, from, next)=> {
    Nprogress.start()
    // 设置页面标题
    document.title = getPageTitle(to.meta.title)
    // 是否有 token
    const hasToken = getToken()
    
    if(hasToken) {
    	if(to.path === '/login')
        next({ path: '/' })
        Nprogress.done()
    }else {
    	const hasGetUserInfo = store.getters.name
        if(hasGetUserInfo){
        	next()
        }else {
        	try {
            	// 获取用户信息
            	await store.dispatch("user/getInfo")
                const userRole = store.getters.role
                // 如果是管理员，则添加：管理员路由、末尾路由
                const addRoutes = userRole === 'admin'?[...adminRoutes, ...endRoutes]: endRoutes
                // 最后，添加路由到 router 上
                router.addRoutes(addRoutes)
                
                // xxx
                router.options.routes = router.options.routes.concat(addRoutes)
                
                // 导航到当前路由
                next(to.fullPath)
            } catch( error ){
            	await store.dispatch("user/resetToken")
                Message.error(error || "has Error")
                Nprogress.done()
            }
        }
    }

})