javascript - 如何将路由器中的组件状态传递到另一个路由器组件

Question

我现在正在设计 frontend部分。这是我的Router
/是登录页面。它检查 token在localStorage旁边。它有isAuthenticated在 state

/select-teams是功能页面，在让用户使用它之前必须验证 token第一的。
问题是。
1.应该刷新token每次之前query APIs ？
2、器间componentWillMount通过检查token每次 VS 通过状态时都会起作用。哪一种是最佳实践？ IMO阅读localStorage每次都可能会减慢应用程序的速度。然而，这对我来说很容易做到，但却不是DRY
3.假设我想通过isAuthenticated状态介于Route之间到另一个Route 。我怎样才能做到这一点？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {Provider} from 'react-redux';
import {applyMiddleware, createStore} from 'redux';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import promise from 'redux-promise';
import LoginPage from "./components/loginPage";
import reducers from './reducers/index';
import SelectTeam from './components/select_teams';

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/select-teams" component={SelectTeam}/>
          <Route path="/" component={LoginPage}/>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.getElementById('root'));
registerServiceWorker();

这是我的Component

import React, {Component} from 'react';
import {connect} from 'react-redux';
import login_image from '../images/login_image.png';
import {Field, reduxForm} from 'redux-form';
import {getTokenAuth, refreshToken} from "../actions";
import ErrorMessage from './errorMessage';

class LoginPage extends Component {
  //1. Verify user token. If token is good.
  //1.1 Do refresh token and
  //1.2 Then put him to `select-teams` page
  //1.3 Finally set isAuthenticated: true

  //2. If token is not good. Let user login again.
  //By setting the isAuthenticated: false
  constructor(props) {
    super(props);
    const token = localStorage.getItem('token');
    const isAuthenticated = !((token === undefined) | (token === null));
    this.state = {
      token: localStorage.getItem('token'),
      isAuthenticated,
      message: null,
      statusCode: null
    };
  }

  componentWillMount() {
    console.log('Enter componentWillMount');
    const token = this.state.token;
    if (token === undefined || token === null)
      this.setState((prevState) => {
        {
          isAuthenticated: false
        }
      });
    else {
      console.log('componentWillMount token is exist');
      //Refresh the token. Let backend verify it
      //Outcome is 1. It is expired and unable to refresh
      //Or 2. It is refreshed
      this.props.refreshToken(token, (res) => {
        console.log(res.status);
        if (res.status === 200) {
          //Receive new token
          localStorage.setItem('token', res.data.token);
          this.setState((prevState) => {
            return Object.assign(prevState, {
              isAuthenticated: true,
              statusCode: res.status,
              message: res.statusText
            });
          });
          this.props.history.push('/select-teams');
        } else {
          //Token is expired and can not be able to refresh again. Force user to do login again by remove his token
          localStorage.removeItem('token');
          this.setState((prevState) => {
            return Object.assign(prevState, {
              isAuthenticated: false,
              statusCode: res.status,
              message: res.data.non_field_errors
            });
          });
        }
      })
    }
  }

  renderField(field) {
    const {meta: {touched, error}} = field;
    const className = `'form-group' ${touched && error ? 'has-danger' : ''}`;

    return (
      <div className={className}>
        <label>{field.label}</label>
        <input
          className="form-control"
          type={field.type}
          placeholder={field.placeholder}
          {...field.input}
        />
        <div className="text-help">
          {touched ? error : ''}
        </div>
      </div>
    );
  }


  onSubmit(values) {
    console.log(values);
    this.props.getTokenAuth(values, (res) => {
      console.log(res.status);
      if (res.status === 200) {
        localStorage.setItem('token', res.data.token);
        this.setState((prevState) => {
          return Object.assign(prevState, {
            isAuthenticated: true,
            statusCode: res.status,
            message: res.statusText
          });
        });
        this.props.history.push('/select-teams');
      } else {
        localStorage.removeItem('token');
        this.setState((prevState) => {
          return Object.assign(prevState, {
            isAuthenticated: false,
            statusCode: res.status,
            message: res.data.non_field_errors
          });
        });
      }
    })
  }

  render() {
    const {handleSubmit} = this.props;

    return (
      <div>
        <img src={login_image} alt="Poink Logo"/>
        <ErrorMessage
          isAuthenticated={this.state.isAuthenticated}
          message={this.state.message}
        />

        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <Field
            name="userid"
            component={this.renderField}
            placeholder="User ID"
            type="text"
          />
          <Field
            name="password"
            component={this.renderField}
            placeholder="Password"
            type="password"
          />
          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
        <a className='btn btn-primary' href="https://www.magicboxasia.com/">Sign up</a>
      </div>
    );
  }
}

function validate(values) {
  const errors = {};

  // Validate the inputs from 'values'
  if (!values.userid) {
    errors.userid = "Enter a user ID!";
  }

  if (!values.password) {
    errors.password = "Enter your password";
  }

  return errors;
}

function mapStateToProps(state) {
  return {
    token: state.token,
    isAuthenticated: state.isAuthenticated,
  }
}

export default reduxForm({
  validate,
  form: 'LoginForm'
})(
  connect(mapStateToProps, {getTokenAuth, refreshToken})(LoginPage)
);

Answer 1

您的 react 应用程序应该验证 token 是否位于本地存储/另一个存储上，并且您的后端必须验证 token 是否有效，因为如果没有其 secret ，您无法验证 token 是否有效。

我们在我工作的公司所做的是一个高阶组件，它接收一个函数来检查 token 是否存储为 Prop 。如果该函数返回 true，我们将渲染该组件，如果不返回，它将重定向到登录路由。该函数称为isAuthorized。

const PrivateRoute = ({ component: Component, isAuthorized, ...otherProps }) => (
<Route
    {...otherProps}
    render={props => (
        isAuthorized() ? (<Component {...props} />) :
            (
                <Redirect to={
                    {
                        pathname: '/login',
                        state: { from: props.location },
                    }
                }
                />
            )
    )}
/>
);

这是我们的索引。我们导入告诉用户是否有权查看此路由的函数，在本例中为 hasToken:

<Switch>
    <PrivateRoute exact path="/" isAuthorized={hasToken} component={Home} />
    <PrivateRoute exact path="/list" isAuthorized={hasToken} component={List} />
    <PrivateRoute exact path="/view/:id" isAuthorized={hasToken} component={View} />
    <Route component={PageNotFound} />
</Switch>

现在，如果 token 不存在，它的 PrivateRoute 负责重定向用户登录。

现在您应该考虑一种在后端返回 401(未经授权)时重定向用户登录的好方法。后端是实际的 token 验证器。在我工作的公司中，我们使用 axios 来执行 ajax 调用，并且我们创建了一个 axios 拦截器，如果后端响应返回 401 http 状态代码，该拦截器会将用户重定向到登录路由。