Electron+Vue+msal-nodejs集成Azure AD时重定向URL配置问题求助

开发环境修复方案 #

• 开发阶段统一使用createWebHistory路由模式，放弃hash模式：hash模式下Azure AD返回的授权码等参数会拼接在#之前，Vue路由无法正确传递参数给msal处理逻辑，必然会认证失败。
• 新增专属回调路由：你之前认证成功后空白是因为没有匹配的路由处理回调请求，在Vue路由中新增路径为/azure-auth-callback的路由，该路由仅用来执行msal的授权码校验、令牌兑换逻辑，处理完成后再跳转至首页或用户之前访问的页面即可。
• 修改回调地址配置：Azure后台和开发环境.env文件的回调地址统一改为http://localhost:8080/azure-auth-callback，避免和根路由逻辑冲突。

生产环境修复方案 #

生产环境必须使用hash模式的前提下，不要尝试用app://协议的页面地址作为Azure回调地址，Azure不支持带相对路径的自定义协议地址，用以下两种方案二选一即可：

方案1：自定义协议拦截回调（推荐） #

• 首先在Azure后台注册自定义协议回调地址，格式为你的自定义协议名://auth-callback，比如myelectronapp://auth-callback，该格式完全符合Azure的回调地址规则。
• Electron主进程中提前注册自定义协议拦截逻辑，示例代码：

const { app, protocol } = require('electron')
const path = require('path')

app.whenReady().then(() => {
  // 注册自定义协议
  protocol.registerFileProtocol('myelectronapp', (request, callback) => {
    // 所有该协议的请求都指向本地打包后的index.html
    callback({ path: path.join(__dirname, 'index.html') })
  })
})

• msal配置的重定向地址填写上面注册的myelectronapp://auth-callback，授权完成后主进程会自动跳转到本地页面，hash路由可以正常识别后续跳转逻辑，不会出现空白页。
• 页面加载逻辑保持你原来的await win.loadURL('app://./index.html')即可，和回调地址互不影响。

方案2：桌面端原生认证流 #

如果不想改自定义协议，直接用msal-node专为桌面应用提供的设备码流，配置Azure后台回调地址为微软官方预留的原生客户端地址https://login.microsoftonline.com/common/oauth2/nativeclient，认证时会弹出系统浏览器完成登录，用户复制浏览器返回的授权码粘贴到应用内即可完成令牌兑换，完全不需要处理本地重定向问题。

通用注意事项 #

• 回调路由要排除在全局登录校验逻辑之外，避免出现路由守卫拦截回调请求导致的死循环。
• 生产环境打包时要确保hash模式的base路径配置正确，不要留空或配置为相对路径。

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