使用 React Router PrivateRoute 处理 Refreshtoken答案

【问题标题】：Handling Refreshtoken with React Router PrivateRoute使用 React Router PrivateRoute 处理 Refreshtoken
【发布时间】：2019-03-22 02:51:07
【问题描述】：

我正在使用 React-Router V4，我想交出一个“经过身份验证”的道具来决定是将用户发送到登录页面还是请求的页面：

PrivateRoute.js

import React from "react";
import {
  Route,
  Redirect,
} from "react-router-dom";
const PrivateRoute = ({ component: Component, authenticated, ...rest }) => (
    <Route
      {...rest}
      render={props =>
        authenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
)
export default PrivateRoute;

我的 App.js 看起来像这样：

class App extends Component {

is_authenticated() {
    const token = localStorage.getItem('access_token');
    //if token is not expired send on the way
    if (token && jwt_decode(token).exp > Date.now() / 1000) {
      return true;
    } else {
    // if token is expired try to refresh
    const refresh_token = localStorage.getItem('refresh_token');
    if(refresh_token) {
      axios.post(config.refresh_url,{},{
                  headers: {"Authorization": `Bearer ${refresh_token}`},
                  "crossdomain": true,
                  mode: 'no-cors',}).then(
                    response => {
                      const access_token = response.data.access_token;
                      localStorage.setItem('access_token', access_token)
                      return access_token ? true : false
                    }
                  )
      }
    }
    return false
  }

  render() {
    const client = this.client;
    return (
      <Router>
        <div>
          <Route exact path="/login" component={Login} />
          <PrivateRoute exact path="/" component={Home} authenticated={this.is_authenticated()} />
        </div>
      </Router>
    );
  }
}

export default App;

由于 Axios 调用是异步的，因此组件会在调用完成之前呈现。

如何让渲染等待令牌刷新？

【问题讨论】：

标签： javascript reactjs asynchronous jwt react-router-v4

【解决方案1】：

我会将 isAuthenticated 保持在 App 组件状态。然后，您可以在 isAuthenticated 调用中使用 setState 来重新渲染结果。当令牌过期时，这也很重要。

【讨论】：