Question

我有一个使用redux-oidc作为身份验证用户帮助程序的应用程序。我在example application中介绍了如何正确设置身份验证用户，但是在此示例中，他们将需要检查用户是否在每个页面上都已登录，然后才能将其发送到登录页面。

我正在构建的应用程序的路由器具有许多不同的路由。我想知道如何检查用户是否没有登录而无需输入每个组件的代码而进入的路由？

路由器：

export default function Routes(props) {
  return (
    // Replace Router with our own component and add authenication
    // https://medium.com/better-programming/building-basic-react-authentication-e20a574d5e71
    <Router history={history}>
      <Route path="/" component={HomePage}/>
      <Route path="/test1" component={TestPage1}/>
      <Route path="/test2" component={TestPage2}/>
      <Route path="/test3" component={TestPage3}/>
      <Route path="/callback" component={CallbackPage} />
    </Router>
  );
}

这是具有4条路由的路由器的示例：Home，Test1，Test2和Test3。

主页：

function HomePage(props) {
  const { user } = props;

  return !user || user.expired ? <LoginPage /> : (
    <div>
      <h1>Awesome Main Page!</h1>
      <h3>{user ? user.profile.name : "Mister Unknown"}</h3>
    </div>
  );
}

在“主页”组件中，我们检查用户是否已通过身份验证。如果不是，则转到“登录”页面。

测试页：

function TestPage1(props) {
  const { user } = props;

  return !user || user.expired ? <LoginPage /> : (<div><h1>Test Page 1</h1><h3>{user ? user.profile.name : "Mister Unknown"}</h3></div>);
}

在路由器中的每个“测试页”组件上，我们还必须检查用户是否已通过身份验证。这似乎违反了DRY原则，对于我们创建的每条新路线，我们都必须再次检查身份验证。

这是检查身份验证的正常/正确方法，还是有更好的方法来遵守DRY原则？

Answer 1

不，这不是正确的方法。

route.js

<Router history={history}>
  <Switch>
    <PublicRoute path="/" component={Home} exact= {true} />
    <PrivateRoute path="/Test1" component = {Testpageone} />
    <PrivateRoute path="/Test2" component= {Testpagetwo} />
  </Switch>
</Router>

PrivateRoute.js

import {Redirect} from "react-router-dom"


 const { user } = props;

 return (
<Route
  {...rest}
  component={props =>
    user ? (
      <div>
        <Component {...props} />
      </div>
    ) : (
      <Redirect to="/" />
    )
  }
/>
);

PublicRoute.js

 const { user } = props;
 return (
<Route
  {...rest}
  component={props =>
    user ? <Redirect to="/test1" /> : <Component {...props} />
  }
/>
);
};

希望这会有所帮助

Answer 2

我一直发现最可靠的选择是将大多数应用程序中的登录作为API调用的一部分来处理：

UI片段调用API
如果没有有效的令牌或令牌已过期，请重定向至登录名
这涉及初始登录和会话到期

关键类倾向于关注以下职责：

您可以在没有任何OAuth管道的情况下以高效的方式编写您的React视图。如果有兴趣，请看看我的code sample write up。

我并没有声称自己是React JS的大专家，但是很乐意回答有关OAuth处理的后续问题（如果有帮助的话）。

反应：在所有路径上进行身份验证

路由器：

主页：

测试页：

2 个答案: