React集成Azure AD认证后如何重定向至/dashboard页面

嘿，我明白你的困扰——刚把Azure AD集成好，结果认证完还跳回原来的登录页，确实有点烦。结合你的代码，咱们一步步来改：

第一步：调整路由的根路径逻辑 #

你的router.js里，根路径/现在直接指向了自定义登录页，这就是认证后跳回这里的核心原因。咱们把根路径改成根据登录状态自动跳转：

打开router.js，找到根路径的Route，替换成下面的代码：

<Route exact path="/" render={props => 
  isLoggedIn ? <Redirect to="/dashboard" /> : <Redirect to="/signin" />
} />

这样修改后，当用户访问根路径时：

• 如果已经完成认证（isLoggedIn为true），会自动跳转到/dashboard
• 如果未登录，会跳转到/signin登录页

第二步：确认Azure AD回调地址配置 #

打开你的adalConfig.js（你代码里导入的authContext来自这里），确保redirectUri设置为你的应用根URL（比如http://localhost:3000）。这个地址必须和你在Azure AD应用注册里填写的重定向URI完全一致，否则认证后会出现跳转异常。

示例adalConfig大概是这样：

import { AuthenticationContext } from 'react-adal';

export const adalConfig = {
  tenant: '你的租户ID',
  clientId: '你的客户端ID',
  redirectUri: 'http://localhost:3000', // 务必和Azure AD里的配置一致
  cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

第三步：验证RestrictedRoute逻辑 #

你的RestrictedRoute已经写得很完善了——它会检查isLoggedIn状态，未登录时自动跳回登录页，这部分不需要修改。

做完上面几步，再测试一下：触发Azure AD认证流程，成功后应该会自动跳转到/dashboard页面了。

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