Question

我想知道什么类型的导航适用于登录身份验证？现在我使用条件渲染来显示某些页面或组件并通过

if (this.state.loggedIn) {
    return <UI loggedIn={this.state.loggedIn} showUser=
{this.state.showUser} logout={this.logout.bind(this)} />; 

            };

我可以在验证后渲染一些东西。如果我想渲染几个不同的页面，它会是什么样子？我是否应该在每个页面上添加一个状态，以便在onclicks上更改并使应用程序呈现所需的页面？

谢谢小伙子

Answer 1

这是几乎每个现代应用都必须解决的问题。因此，许多图书馆已经为您解决了这些问题。以此代码为例，它使用react-router：

在我的例子中，我向你展示routes.js文件中的路径，然后是一个单独的文件，表示acl的样子。 acl是一个函数，它被传递到您想要保护的每个路由的onEnter。你可以随意调用它。

<强> routes.js

＆＃13;

import React from 'react';
import { hashHistory, Router, Route, IndexRoute } from 'react-router';

import { acl } from './util/acl-util';

import AppContainer from './containers/app-container';
import DashboardPage from './pages/dashboard-page';

export default class Routes extends React.Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={AppContainer}>
          {/* NON-AUTH ROUTES */}
          <Route
            path="login"
            components={{
              main: LoginPage,
              aside: null,
              header: this.getHeader,
            }}
          />

          {/* AUTH-REQUIRED ROUTES */}
          <Route
            onEnter={acl}
            path="dashboard"
            components={{ main: DashboardPage }}
          />
      </Router>
    );
  }
}

＆＃13;

<强> ACL-util.js中

＆＃13;

import { hasAuth } from './auth-util';

export function acl(nextState, replace) {
  const { pathname, search } = nextState.location;

  if (!hasAuth(theState)) {
    window.alert(
      'Please Log in!'
    );
    replace(`/login?loginRedirect=${encodeURIComponent(pathname + search)}`);
  }
}

＆＃13;

我把这个例子放在一起，从而删除了我不能直接应用于这个概念的部分代码 - 因此这段代码不会按原样运行。您需要定义您的页面，并设置商店等。

您需要定义一个hasAuth函数，该函数可以查看您的状态并确定用户是否经过身份验证。对于我的hasAuth函数，我正在寻找一个jwt令牌并解析日期，如果日期仍在将来，我知道它们仍然是已经过操作，任何后续的休息api调用都可以。

我知道你不是要求某个库，但是我推荐这个，因为我从这个代码获取的应用程序有几十个路由，而acl函数也实现了一个角色矩阵，用于查看用户可以和不能基于他们的jwt令牌做。我们的应用非常庞大，这种方法使它保持井井有条。

如果没有像react-router这样的东西，你就是正确的，你需要手动管理显示的页面并手动检查每个组件中的auth状态，或者让父组件执行它。在我的例子中，管理它的＆＃34;父组件＆＃34;是react-router，我的onEnter方法叫做acl。在传统的应用程序中，acl代表访问控制列表 - 您可以按照自己喜欢的方式扩展代码。

修改

正如评论中提到的那样。您的前端应用程序仅与从数据中获取数据或向其发布数据的后端服务一样安全。在我的示例中，反应代码尝试镜像jwt令牌中的auth状态。但是，在一天结束时，您的真正安全性将仅由您的后端服务提供。仅仅因为前端认为用户可以登录，并不意味着后端应该假设它们是 - 您需要后端身份验证，因为技术用户可以修改所有前端应用程序状态。

React中哪种类型的导航适用于登录身份验证？

1 个答案: