如何使用oidc-client保留用户原始导航URL？

嘿，刚好我对oidc-client.js这块很熟悉，帮你搞定这个跳转问题！

首先明确一点：oidc-client.js完全内置了获取原始请求路径的机制，你不需要手动硬编码state，跟着下面的步骤改就行：

1. 优化认证跳转时的代码（app.js） #

当检测到未认证用户访问目标页面时，把当前页面的路径作为state参数传给signinRedirect，而不是写死路径：

// 在app.js中捕获未认证请求的逻辑里
const targetPath = window.location.pathname; // 自动获取当前路径，比如'/customer/123'
new Oidc.UserManager().signinRedirect({ state: targetPath });

这样不管用户访问哪个需要认证的页面，都会把对应的路径存在state里，通用性更强。

2. 在Callback页面获取state并跳转（callback.html） #

signinRedirectCallback()方法返回的Promise会resolve一个响应对象，里面的state字段就是你之前传入的原始路径！修改你的callback代码如下：

<script src="oidc-client.js"></script>
<script>
Oidc.Log.logger = console;
new Oidc.UserManager().signinRedirectCallback()
  .then(function (response) {
    // 从响应中取出之前传入的原始路径
    const originalPath = response.state;
    // 拼接完整URL并跳转
    window.location.href = `http://localhost:9000${originalPath}`;
  })
  .catch(function (e) {
    console.error("认证回调出错:", e);
  });
</script>

这样就能自动跳转到用户最初请求的页面了，完全不需要硬编码路径。

额外小技巧：保存复杂状态 #

如果需要保存更多上下文信息（比如查询参数、用户操作状态），可以把state序列化成JSON字符串：

// app.js里
const stateData = JSON.stringify({
  path: window.location.pathname,
  search: window.location.search, // 保存查询参数
  customData: "some-info"
});
new Oidc.UserManager().signinRedirect({ state: stateData });

// callback.html里
.then(function (response) {
  const stateObj = JSON.parse(response.state);
  // 拼接完整路径（包含查询参数）
  const originalUrl = `http://localhost:9000${stateObj.path}${stateObj.search}`;
  window.location.href = originalUrl;
})

注意事项 #

• 确保你的UserManager配置中，redirectUri指向的是正确的callback.html地址，否则state可能无法正确传递。
• OIDC协议本身就规定了state参数用来保持认证前的上下文，oidc-client.js已经帮你封装了这个逻辑，不需要自己手动存储和传递。

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