React Admin自定义注册页面未授权访问问题求助

问题原因 #

React-Admin默认对所有路由启用认证守卫，未认证用户仅能访问配置的loginPage，自定义的/signup路由会被守卫拦截，导致跳转失败。

解决方案 #

1. 用UnprotectedRoute配置公开注册路由 #

在app.tsx中，将注册页面的普通Route替换为React-Admin提供的UnprotectedRoute，该组件会绕过认证检查：

import { Admin, Resource, CustomRoutes, UnprotectedRoute } from 'react-admin';
// 其他必要导入...

function App() {
  return (
    <Admin
      authProvider={firebaseAuthProvider}
      dataProvider={firebaseDataProvider}
      i18nProvider={i18nProvider}
      loginPage={LoginPage}
    >
      <Resource name="researchers" list={ListGuesser} />
      <CustomRoutes noLayout>
        {/* 替换为UnprotectedRoute以允许未认证访问 */}
        <UnprotectedRoute path="/signup" element={<SignUpPage />} />
      </CustomRoutes>
    </Admin>
  );
}

2. 修改登录页跳转链接为客户端导航 #

原代码使用MUI的Link组件通过href跳转，会触发浏览器硬刷新，易被认证守卫拦截。需改为React-Router的客户端导航：

先导入React-Router的Link：

import { Link as RouterLink } from 'react-router-dom';

再修改登录页中的跳转代码：

// 替换原<Link href="/signup">
<Link component={RouterLink} to="/signup">{t("signup.signup")}</Link>

或者直接使用React-Router的Link组件：

<RouterLink to="/signup">{t("signup.signup")}</RouterLink>

3. 确保注册页面无强制认证逻辑 #

检查SignUpPage组件，避免调用需要认证权限的方法（如dataProvider的增删改查），也不要使用会强制跳转登录的hooks（如useAuthenticated）。

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