React应用无法正常退出登录并跳转至Azure AD登录页求助

• 点击带有onClick事件的<a>标签Logout链接时，会弹出Refresh Token警告；
• 点击浏览器刷新或后退按钮，仍停留在退出操作的页面。

当前使用的React Logout组件代码如下：

export default function Logout() {
  const ssoLogOut = process.env.VITE_SSO_LOGOUT_URL //https://login.microsoftonline.com/common/oauth2/logout (VITE_SSO_LOGOUT)  
  const ssoLogIn = process.env.VITE_AUTH_URL // https://nonprod-emplogin.ise-nonprod.website.org (VITE_SSO_AUTH_URL)

  function handleSubmit(event) {
    event.preventDefault()
    localStorage.removeItem('cb_emp_login')
    ;(event.currentTarget.parentElement as HTMLFormElement).submit()
    window.location.href = (`${ssoLogIn}/logout?DURL=${window.location.origin}&post_logout_redirect_uri=${encodeURIComponent(window.location.origin)}`)
  }

  return (
    <form
      acceptCharset='utf-8'
      method='post'
      action={ssoLogOut}
      onClick={handleSubmit}
      className='logout'>
      <a href={ssoLogOut} onClick={handleSubmit} className = 'logout'>
        Logout
      </a>
    </form>
  )
}

已尝试过的操作：使用useHistory钩子、window.location.href跳转、删除document.cookie，期望触发onClick事件后用户退出登录并跳转至Microsoft Azure Active Directory（AAD）登录服务的基础URL，但无权修改AAD中的端点配置。

预期效果：触发退出登录操作后，成功跳转至AAD登录页面。

问题根源 #

1. 同时给<form>和<a>绑定了handleSubmit事件，点击链接时两次触发事件，表单提交与页面跳转逻辑冲突，引发Refresh Token警告；
2. 逻辑冗余：既执行表单提交又手动修改window.location.href，导致页面状态异常，刷新/后退后停留在原页面；
3. 未处理页面刷新/后退场景：本地状态清除后，页面未自动跳转至登录页。

修正方案 #

简化组件逻辑 #

移除冗余的<form>标签和重复事件绑定，直接通过AAD的Logout端点完成单点登出，同时处理页面刷新/后退的情况：

import { useEffect } from 'react';

export default function Logout() {
  const ssoLogOut = process.env.VITE_SSO_LOGOUT_URL;
  const ssoLogIn = process.env.VITE_AUTH_URL;

  const handleLogout = (event) => {
    event.preventDefault();
    // 清除本地登录状态
    localStorage.removeItem('cb_emp_login');
    // 构造AAD登出跳转URL：利用AAD logout端点的post_logout_redirect_uri参数
    const redirectUri = encodeURIComponent(window.location.origin);
    const fullLogoutUrl = `${ssoLogOut}?post_logout_redirect_uri=${redirectUri}`;
    // 跳转到AAD登出端点，完成登出后自动跳转回指定地址
    window.location.href = fullLogoutUrl;
  };

  // 处理刷新/后退：本地无登录状态时直接跳转登录页
  useEffect(() => {
    const hasLoginState = localStorage.getItem('cb_emp_login');
    if (!hasLoginState) {
      window.location.href = ssoLogIn;
    }
  }, [ssoLogIn]);

  return (
    <a href={ssoLogOut} onClick={handleLogout} className="logout">
      Logout
    </a>
  );
}

关键说明 #

• AAD的/common/oauth2/logout端点支持post_logout_redirect_uri参数，只要该域名在AAD应用的允许跳转列表中，登出后会自动跳转至指定地址；
• 移除冗余表单：AAD登出支持GET请求跳转，无需通过表单提交；
• useEffect钩子监听页面加载，若本地已无登录状态，直接跳转至登录页，解决刷新/后退后停留在原页面的问题。

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