如何在Vue Router中排除Welcome路由不应用vuex-oidc中间件？

你可以通过自定义路由守卫逻辑，在调用vuex-oidc中间件前排除Welcome路由，以下是两种常用实现方式：

方法一：直接通过路由名称判断 #

先初始化oidc中间件实例，再在beforeEach中判断路由名称，对Welcome路由直接放行，其他路由执行认证逻辑：

import { createRouter, createWebHistory } from 'vue-router'
import { vuexOidcCreateRouterMiddleware } from 'vuex-oidc'
import store from '@/store'
const routes = [
    // ... 你的原有路由配置
]

const router = createRouter({
    base: '/vue3/',
    history: createWebHistory(),
    routes
})

// 先创建oidc中间件实例
const oidcMiddleware = vuexOidcCreateRouterMiddleware(store, 'oidcStore')

// 自定义路由守卫逻辑
router.beforeEach((to, from, next) => {
    // 对Welcome路由直接放行，跳过oidc认证
    if (to.name === 'Welcome') {
        next()
        return
    }
    // 其他路由应用oidc认证中间件
    oidcMiddleware(to, from, next)
})

export default router

方法二：通过路由meta字段控制（更灵活） #

给路由添加meta.requireAuth标记，默认需要认证，Welcome路由标记为不需要，后续动态添加的路由也可通过该字段灵活控制：

第一步：修改路由配置 #

const routes = [
    // ... 其他路由配置
    {
        path: process.env.BASE_URL + 'welcome',
        name: 'Welcome',
        component: () => import('../views/Welcome.vue'),
        meta: { requireAuth: false } // 标记该路由不需要认证
    },
]

第二步：修改路由守卫逻辑 #

const oidcMiddleware = vuexOidcCreateRouterMiddleware(store, 'oidcStore')

router.beforeEach((to, from, next) => {
    // 检查路由meta，若明确标记不需要认证则直接放行
    if (to.meta?.requireAuth === false) {
        next()
        return
    }
    // 其他路由执行oidc认证逻辑
    oidcMiddleware(to, from, next)
})

这种方式的优势在于，后续通过this.$router.addRoute()动态添加路由时，只需给对应路由配置meta: { requireAuth: false }，就能自动绕过认证，扩展性更强。

内容的提问来源于stack exchange，提问作者Ergec