Question

我想向我的let presenter = Presenter(backgroundScheduler: self.scheduler, mainScheduler: self.scheduler)网络门户添加注册页面。由于react-admin不提供注册页面，因此我创建了一个自定义页面并将其添加到自定义路由中：

customRoutes.js

react-admin

问题在于，只有用户已经登录，我才能在import React from 'react'; import { Route } from 'react-router-dom'; import SignupForm from './signupForm'; export default [ <Route path="/signup" component={SignupForm} noLayout/>, ];处打开页面。否则，我会自动重定向到/signup路由。

如何禁用自定义路由的身份验证？ /login是否接受某些属性或与<Route>有关？

编辑：

为我的dataProvider.js添加代表代码：

signupForm.js

Answer 1

问题在于，/signup在请求react-admin时正在调用类型为authProvider的{{1}}，其代码为：

AUTH_GET_PERMISSIONS

由于用户尚未登录，因此if (type === AUTH_GET_PERMISSIONS) { const role = localStorage.getItem('role'); return role ? Promise.resolve(role) : Promise.reject(); }从未被初始化。

将其更改为：

localStorage.role

Answer 2

React-admin V3 版本，更改 authProvider 默认返回 'guest' 角色：

authProvider.js

  ...,
  getPermissions: () => {
    const role = localStorage.getItem('permissions')
    return role ? Promise.resolve(role) : Promise.resolve('guest') // default 'guest'
  },
  ...

现在您的 customRoutes 页面将不再重定向到 /login，您可以使用 usePermissions 钩子检查自定义页面中的角色。

Answer 3

您可以在 PublicRoutes 文件中使用所有未经身份验证的路由创建一个类似枚举的对象 customRoutes.js，如下所示：

customRoutes.js


export const PublicRoutes = {
    SIGNUP: "/signup",
}

export const customRoutes = [
     <Route path={PublicRoutes.SIGNUP} component={SignupForm} noLayout/>
]

然后在您的 authProvider 中导入 history 或 router 对象（在您的 Admin 组件中创建），以访问当前位置 pathname。

接下来，创建一个函数表达式isPublicRoute，它将检查当前路由是否可以在没有身份验证的情况下提供服务。将此检查添加到 AUTH_GET_PERMISSIONS 和可选的 AUTH_CHECK 之上（如果您有例如 JWT 解析器）。

对于 AUTH_GET_PERMISSIONS 返回 Promise.resolve()，因为我们有权访问公共路线。对于 AUTH_CHECK 返回 Promise.reject()，因为我们在这里不需要授权（例如获取或解析 JWT）。

authProvider.js


import {PublicRoutes} from "./customRoutes";

...

const isPublicRoute = (pathname) => Object.values(PublicRoutes).some(route => route === pathname);

...

const {pathname} = router.location;

if (type === AUTH_GET_PERMISSIONS) {
     // has to be on top 
     if(isPublicRoute(pathname)) return Promise.resolve();
     ...
}

if (type === AUTH_CHECK) {
     // has to be on top        
     if(isPublicRoute(pathname)) return Promise.reject()
     ...
}

在react-admin中添加未经身份验证的自定义页面

3 个答案: