如何在react-admin中通过msalAuthProvider设置自定义默认路由？

你遇到的问题是登录后系统默认跳转到第一个Resource的路由（/users），需要修改为自定义路由。以下是几种可行的解决方案：

方案一：利用ra-auth-msal的redirectUri配置（推荐） #

ra-auth-msal的msalAuthProvider支持通过redirectUri参数指定登录成功后的跳转目标，直接修改authProvider.ts即可：

import { msalAuthProvider, MsalHttpClientParams } from "ra-auth-msal";
[...]
export const authProvider: AuthProvider = msalAuthProvider({
    msalInstance: myMSALObj,
    redirectUri: "/mycustomroute/123" // 替换为你的自定义路由
});

这个配置会让MSAL在认证完成后直接跳转到指定的自定义路由，无需额外修改路由逻辑。

方案二：自定义Dashboard组件覆盖react-admin默认首页 #

react-admin默认会将第一个Resource的列表页作为首页，你可以通过设置Admin组件的dashboard属性，替换为一个自动跳转到自定义路由的组件：

1. 创建Dashboard跳转组件：

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

export const Dashboard = () => {
    const navigate = useNavigate();
    
    useEffect(() => {
        // 登录后自动跳转到自定义路由
        navigate("/mycustomroute/123", { replace: true });
    }, [navigate]);
    
    return null; // 可以替换成加载动画等提示组件
};

2. 在App.tsx的Admin组件中添加dashboard配置：

<Admin
    layout={Layout}
    requireAuth
    dataProvider={dataProvider}
    authProvider={authProvider}
    loginPage={LoginPage}
    dashboard={Dashboard} // 配置自定义Dashboard
>
    {/* 原有的CustomRoutes和Resource配置保持不变 */}
</Admin>

这样登录后react-admin会默认加载Dashboard组件，随后自动跳转到你的自定义路由。

方案三：重写authProvider的login方法 #

如果前两种方案不生效，可以手动扩展authProvider，重写login方法实现强制跳转：

import { msalAuthProvider } from "ra-auth-msal";
import myMSALObj from "./path-to-your-msal-instance";

// 先获取基础的authProvider实例
const baseAuthProvider = msalAuthProvider({
    msalInstance: myMSALObj
});

// 扩展并重写login方法
export const authProvider = {
    ...baseAuthProvider,
    async login(params) {
        // 执行原有的登录逻辑
        await baseAuthProvider.login(params);
        // 登录成功后跳转到自定义路由
        window.location.href = "/mycustomroute/123";
    }
};

这种方式直接在登录完成后强制修改页面地址，适用于需要更灵活控制跳转逻辑的场景。

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