Vue集成vue-msal对接Azure AD时重定向URL不生效问题排查

问题根因 #

• 未配置路由鉴权守卫，Azure AD重定向回/home时，vue-msal尚未完成token解析与认证状态初始化，无对应逻辑处理已登录状态的自动跳转。
• 登录页未增加初始化时的登录状态校验，第一次认证完成回跳后若页面落到登录路由，不会自动触发首页跳转。
• 未监听vue-msal的认证完成回调，认证成功后无主动路由跳转逻辑。

修复步骤 #

1. 新增全局路由守卫

在路由配置文件中，导出router前新增如下守卫逻辑：

const router = new VueRouter({
    mode: 'history',
    routes,
});

// 新增路由守卫开始
router.beforeEach((to, from, next) => {
  const isAuthenticated = Vue.prototype.$msal?.isAuthenticated() || false
  // 已登录状态下访问登录页直接跳转首页
  if (to.path === '/' && isAuthenticated) {
    return next('/home')
  }
  // 未登录状态下访问首页直接跳转登录页
  if (to.path === '/home' && !isAuthenticated) {
    return next('/')
  }
  next()
})
// 新增路由守卫结束

const msalConfig = {
  // 保持原有配置不变，可按需修改navigateToRequestUrl为true
  auth: {
    ...
    navigateToRequestUrl: true, // 改为true后msal认证完成会自动跳转回发起登录前的页面
    ...
  }
}

2. 调整Login.vue逻辑

增加页面初始化校验与认证成功事件监听：

<script>
export default {
    name: 'Login',
    mounted() {
        // 页面加载时先校验登录状态，已登录直接跳转首页
        if (this.$msal.isAuthenticated()) {
            this.$router.push('/home')
        }
        // 监听重定向模式下的认证成功事件，触发跳转
        this.$msal.$on('msal:signInSuccess', () => {
            this.$router.push('/home')
        })
    },
    methods: {
        async login() {
            if (!this.$msal.isAuthenticated()) {
                await this.$msal.signIn();
                // 弹窗登录模式下认证完成后直接跳转
                this.$router.push('/home')
            } 
        },
    },
};
</script>

注意事项 #

需确保Azure应用注册中配置的重定向URI与代码中redirectUri完全一致，包含末尾的斜杠/，否则会出现token匹配失败问题。

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