javascript - 无法在未登录的情况下重定向到重置密码链接

Question

我是 react 路由器和实现登录系统的新手，但是，由于我没有构建整个应用程序，我不太确定为什么如果用户未登录，所有路由都会重定向到/#/..

我正在使用 React Router，我希望有人能够单击电子邮件上的链接，将他们带到

http://localhost:3001/auth/forgot8b8dc686ee38320f7f5dd7b858e62a402cd2f0bb#/

这就是我在 react 路由器中引用链接的方式

`  {
    path: "/forgot",
    component: loadable(() => import("./layout/forgot/forgot")),
    pure: false,
    exact: true
  },`

`<ConnectedRouter history={history}>
        <IndexLayout>
          <Switch>
            <Route exact path='/forgot' component={Forgot} />
            <Route exact path="/" render={() => <Redirect to="/foo/all" />} />
            {routes.map(route => (
              <Route
                path={route.path}
                component={route.component}
                key={route.path}
                exact={route.exact}
              />
            ))}
            <Route component={NotFound404} />
          </Switch>
          <ToastContainer autoClose={8000} hideProgressBar={true} />
        </IndexLayout>
      </ConnectedRouter>`

如果我没有登录，上面只会将我重定向到我的主页，我什至看不到在控制台中调用的 URL，但是如果我登录了，我可以看到该组件正在我的仪表板上呈现(我不希望它在我的仪表板中呈现，我希望它成为一个未登录用户可以用来重置密码的页面，类似于我的主页)

本质上，我想要一条未登录用户可以访问的路线，而无需它位于我的仪表板内。

我的忘记页面包含用户可以输入新密码的字段，位于 .layout 文件夹中，这也是我的 IndexLayout 的位置

`import IndexLayout from "./layout";`

只有用户登录后，我的仪表板才会呈现

`return this.props.user.authenticated && this.props.user ? (
      <Dashboard children={children} user={user} />
    ) `

但是我不明白为什么这会影响我能看到和不能看到的内容。

我通常使用标准 Express 和 pug 来构建我的应用程序，我只会执行 app.get('forgot:token'(req,res,next)=>{etc}) 等。

Answer 1

假设您的网址是 http://localhost:3001/auth/forgot8b8dc686ee38320f7f5dd7b858e62a402cd2f0bb#/

路径模式/forgot与此不匹配。这就是为什么您没有登陆Forgot组件。

您可以将 URL 结构更改为:

.../forgot/8b8dc686ee38320f7f5dd7b858e62a402cd2f0bb

然后您可以使用 React Router URL Params 检索 token 像这样:

<Route exact path='/forgot/:token' component={Forgot} />