Vue与Angular跨端口站点基于JWT重定向授权登录可行性咨询

这个跨技术栈的跳转授权登录流程完全可实现，核心依托JWT本身的跨端无状态特性，只要两个站点对齐JWT的签发、校验规则，不需要额外搭建独立的单点登录服务就能跑通全流程。

Vue站点（localhost:3000）侧处理 #

• 账号密码提交后走常规登录校验，服务端签发JWT时保持统一规则：固定签名密钥/公钥私钥对、统一payload字段（需包含用户ID、角色标识、过期时间），确保两个站点能识别同一份JWT。
• 登录成功后判断用户角色，若为买家身份，不要将JWT仅存在当前站点的本地存储中，构造指向Angular站点的重定向地址，将JWT作为URL参数拼接在地址后，格式参考：http://localhost:4200/auth/auto-login?token=替换为实际JWT值。如果后续生产环境JWT体积较大、担心URL长度限制，也可以将JWT写入两个站点共享主域的HttpOnly Cookie中，本地调试阶段URL传参足够使用。
• 触发重定向跳转到上述构造好的Angular地址。

Angular站点（localhost:4200）侧自动登录处理 #

• 新增专门的/auth/auto-login回调路由，页面初始化逻辑中首先解析URL查询参数，提取携带的token字段值。
• 拿到token后先做合法性校验：先本地解码JWT payload，检查是否在有效期内、角色标识是否为买家，格式校验通过后，再通过统一的验签逻辑（对称加密用共享密钥验签、非对称加密用公钥验签，也可以调用后端统一的token校验接口）确认token未被篡改。
• 校验通过后，将JWT存入Angular站点自身的状态管理、localStorage中，后续站点所有业务接口请求都按规范将token携带在请求头Authorization字段中；完成存储后立刻通过路由跳转清除URL上的token参数，避免token残留在地址栏被泄露，最后跳转到站点买家首页即可完成自动登录。

• JWT必须设置合理的有效期，禁止签发永久生效的token。
• Angular侧拿到token完成存储后，必须第一时间清除URL中的token参数，避免token被浏览器历史记录、页面referrer头携带泄露。
• 可以额外增加一次性防重放逻辑：Vue侧重定向前，为本次跳转的JWT绑定一个10秒内有效的随机临时校验码，Angular侧校验token时同步校验该临时码，校验通过后立刻将临时码作废，避免token被截获后恶意复用。
• 生产环境如果两个站点部署在同一主域下，优先用带HttpOnly、Secure标记的共享Cookie传递JWT，比URL传参的安全等级更高。

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