Keycloak：未登录点击URL后，登录如何重定向至该页面

下面是几种开发中常用的实用实现思路：

前端存储方案（适合单页应用或纯前端路由场景） #

• 当路由拦截到未登录用户访问受保护页面时，把当前目标页面的URL存在sessionStorage（相比localStorage，sessionStorage关闭浏览器就会清空，安全性更高）里：

  // 以Vue路由守卫为例
  router.beforeEach((to, from, next) => {
    const isLoggedIn = checkUserLoginStatus(); // 自定义的登录状态判断方法
    if (to.meta.requiresAuth && !isLoggedIn) {
      sessionStorage.setItem('redirectUrl', to.fullPath);
      next('/login');
    } else {
      next();
    }
  });
  

• 用户登录成功后，读取存储的URL并跳转，之后记得清空该存储，避免后续登录重复跳转：

  // 登录成功后的逻辑
  const redirectUrl = sessionStorage.getItem('redirectUrl') || '/';
  window.location.href = redirectUrl;
  sessionStorage.removeItem('redirectUrl');
  

后端存储/参数传递方案（更安全，适合服务端渲染或前后端分离的接口校验场景） #

• 参数拼接方式：后端检测到用户未登录时，把用户原本要访问的URL作为redirect参数拼到登录页的跳转地址里，比如跳转到/login?redirect=/user/order/detail
• 登录页面拿到这个redirect参数后，登录请求时将其一起传给后端；后端验证登录成功后，直接重定向到redirect指定的地址，或者把地址返回给前端由前端跳转。
• Session存储方式：后端拦截未登录请求时，把当前请求的URL存入用户的Session中，登录成功后从Session取出该URL进行重定向，之后清空Session里的对应字段。这种方式避免了URL参数泄露的问题，安全性更高。

关键注意事项 #

• 必须做跳转地址合法性校验：不管是前端还是后端，都要检查redirect的地址是否属于当前网站域名，防止被恶意构造参数跳转到钓鱼网站。比如前端可判断地址是否以/开头，后端可直接校验域名匹配度。
• 处理默认场景：如果没有获取到redirect地址（比如用户直接打开登录页），登录后默认跳转到首页或指定的默认页面。

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