vue3-动态路由问题(由后端返回路由进行拼接)

因需求和安全性,将前端路由逻辑改为后端发送不同权限路由至前端拼接。介绍了核心代码,分析了页面刷新获取不到动态路由致重定向、首次执行beforeEach重定向到404页面两个问题,并给出解决办法,最终完成动态路由功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        由于需求和安全性原因,将原来由前端根据用户权限去添加、剔除的路由逻辑改为由后端将不同权限的路由发送至前端进行路由拼接的写法(其实我也不清楚哪里不安全...没有进行注册的路由是无法访问的...如果访问的了只能说明剔除的逻辑写的有问题)但是客户是这么要求的,没办法....😭

一、核心代码(能实现效果,但可以优化)

router.beforeEach((to, from, next) => {
    const userStore = useUserStore()
    const usePermissionStore = useUserPermissionStore()
    if (to.path !== '/login') {
        if (userStore.getToken) {
            const isExist = router.hasRoute(to.name!)
            // 用于解决动态路由刷新白屏问题
            if (!isExist) {
                usePermissionStore.getDynamicRoutes.forEach(item => {
                    item.component = () => import(`@/layout/index.vue`)
                    if (item.children.length > 0) {
                        item.children.forEach((items: any) => {
                           
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值