React Route点击跳转时校验登录态，未登录跳转登录后返回原目标页面

核心逻辑 #

你只需要在原有未登录跳登录的逻辑基础上，新增「回调地址传递+登录后读取回调地址跳转」的逻辑即可，不需要大幅改动现有流程。

具体实现步骤 #

单页应用（前端路由场景） #

• 点击选手卡片时，先拿到目标选手资料页的路由地址，例如/player/选手ID
• 校验到用户未登录时，跳转登录页时把目标地址编码后作为参数带过去，代码示例：

const targetPath = `/player/${playerId}`
// 未登录
if (!userToken) {
  window.location.href = `/login?redirect=${encodeURIComponent(targetPath)}`
  return
}
// 已登录直接进选手页
window.location.href = targetPath

• 登录页初始化时，先从URL参数里解析出redirect的值临时存储
• 登录接口请求成功后，优先跳转到存储的redirect地址，没有的话再跳转到首页这类默认地址，同时要做安全校验：只允许redirect为本站相对路径，禁止跳转到外部域名，避免开放重定向漏洞

多页应用/服务端渲染场景 #

• 用户点击选手卡片后，选手页的服务端路由先校验登录态
• 未登录时，服务端返回302重定向响应，重定向地址为登录页拼接编码后的目标选手页地址，例如响应头Location: /login?redirect=https%3A%2F%2F你的站点域名.com%2Fplayer%2F123
• 登录提交后，服务端校验账号密码正确，直接返回302重定向到redirect参数对应的地址即可，同样要校验redirect的域名属于本站白名单

特殊场景适配 #

如果你的登录流程涉及第三方授权（比如微信、微博登录），只要把redirect参数在跳转到第三方授权页时同步传递，第三方回调回本站时再带回参数，登录流程完成后跳转即可。
APP端实现逻辑完全一致，只需要把路径替换为原生页面路由参数，传递给登录页或者临时存在本地存储，登录完成后读取跳转即可。

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