Vue3+vite实现动态权限路由

Vue3实现动态权限路由

使用vue3+vite实现页面权限路由，记录一下我实现的时候遇到的两个问题。

1、 如何动态导入路由组件？

后端返回的路由配置信息里面的component是该组件的文件名（不带后缀—— .vue)，所以添加到路由之前还需要进行格式化，将文件名转成动态导入的文件，vue2的方法在vue3上不行，根据错误提示的URL（https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations）

 // ES6模板字符串的语法导入 可以
 component: () => import(`@/views/admin/${item.component}.vue`),
 // 传统的字符串拼接方式  不可以
 component: () => import("@/views/admin/" + item.component + ".vue"),

至于为什么不可以？ChatGPT是这么解释的

ChatGPT：

在 Vue 3 中，由于编译器的优化，使用传统的字符串拼接方式在动态导入时可能会导致一些问题。

Vue 3 的编译器在静态分析过程中会尝试找出模块的依赖关系，以便进行优化。然而，传统字符串拼接的方式会使编译器难以准确分析模块的依赖关系，从而可能导致一些潜在的问题。

正确的做法是使用 ES6 模板字符串的方式来动态导入组件，就像你在第一个示例中提到的那样：component: () => import(@/views/admin/${item.component}.vue),

这样可以确保编译器能够正确地分析模块的依赖关系，以便在构建过程中进行必要的优化和代码拆分。

总而言之，在 Vue 3 中，使用 ES6 模板字符串来动态导入组件是更可靠和推荐的做法。

下面是一个格式化路由的一个方法，因为后端传过来的数据不可以直接添加到路由中。

const formatRoutes = (routes: any) => {
    const fmtRoutes: any = []

    routes.forEach((item: any) => {

        // 有嵌套路由
        if (item.children) {
            item.children = formatRoutes(item.children)
        }

        fmtRoutes.push({
            path: item.path,
            name: item.name,
            component: () => import(`@/views/admin/${item.component}.vue`),
            // component: () => import("@/views/admin/" + item.component + ".vue"),
            meta: item.meta,
            icon: item.icon,
            children: item.children,
        })
    })

    // 返回格式化后的路由
    return fmtRoutes
}

2、路由重定向，导致内存溢出？

格式化后使用addRoute方法添加到路由中，但是页面始终不显示，控制台有个vue-router的警告——可能发生了无限重定向，从而导致堆栈溢出。因为是在全局前置路由守卫里动态添加的路由，所以路由跳转后会被全局路由守卫拦截，又会执行添加路由的方法，可以添加一个判断，添加后不再添加。

const router = createRouter({
    history: createWebHistory(),
    routes: [...staticRoutes]
})

// 路由白名单
const whiteList = ["/login", "/register", "/", "/questions", "/like", "/collect"]

// 判断权限路由是否添加 防止无限重定向
let isAddRoutes = false

router.beforeEach(async (to, from, next) => {
    const dynamicRouteStore = useDynamicRouteStore()
    const hasToken = sessionStorage.getItem("token")
    if (hasToken) {
        if (to.path == "/login") {
            console.log('已登录，跳转首页');
            next({
                path: "/questions"
            })
        } else {
            if (!isAddRoutes) {
                // 模拟请求获取路由
                const routes = await dynamicRouteStore.getRoutes()
                const fmtRoutes = formatRoutes(routes)
                fmtRoutes.forEach((route: RouteRecordRaw) => {
                    router.addRoute(route)
                })
                isAddRoutes = !isAddRoutes
                next({
                    ...to,
                    replace: true
                })
            }else{
                next()
            }
        }
    } else {
        if (whiteList.indexOf(to.path) !== -1) {
            next()
        } else {
            next({
                path: "/login?redirect=" + to.path
            })
        }
    }
})

这就是本章vue3+vite实现动态路由的全部了，接下来还会发布按钮级别的权限控制。