Question

我目前正在查看一个具有快速后端的React应用程序的令牌认证示例，而我偶然发现了Jason Watmore的React + Redux - JWT Authentication Tutorial & Example博客条目中有关如何创建react-redux认证前端的信息。在这种情况下，要呈现专用路由，前端只需检查令牌是否存在，并让服务器验证其路由。

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    localStorage.getItem('user')
      ? <Component {...props} />
      : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
  )} />
)

上面的代码是呈现私有路由的有效方法，因为他确实提到有人可以向本地存储区插入令牌，但是服务器会验证请求。我解决此问题的另一种方法是让私有路由在render函数中异步验证令牌，如下所示：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(token, props) => (
    tokenAuthenticationRequest(token)
      ? <Component {...props} />
      : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
  )} />
)

但是，我遇到的问题之一是React组件需要使用Suspense来加载异步功能。

对专用路由进行前端令牌检查

0 个答案: