React.js 身份验证答案

【问题标题】：React.js authenticationReact.js 身份验证
【发布时间】：2019-01-03 20:29:21
【问题描述】：

我有一个 react 和 redux 应用程序，用户在一定时间后退出。我将 jwt 令牌存储在本地存储中，并在它过期时将其删除。在我的 app.js 文件中，我执行逻辑检查它是否存在以及是否过期，但该代码仅在应用程序刷新时运行，我试图找到一种方法让它不断运行过期逻辑或更好地运行每次当前路线更改时，而不是刷新时。提前致谢。

基本结构：

imports 

expiration logic 

class App extends component {
render() {
   return (
         ...
         )
}
}

【问题讨论】：

标签： reactjs authentication react-redux jwt

【解决方案1】：

我假设您在应用的入口点设置了您的商店。那时，当商店在范围内时，我会在窗口中添加一个事件侦听器以检测路由更改（您也可以使用setInterval()...），然后使用商店的getState() 和dispatch()方法直接。

// entrypoint.js (pseudo-code)

// imports...
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import App from './components/App';

// create the store
const store = createStore(...)

// listen for route changes
window.addEventListener('popstate', () => {
  const token = store.getState().jwt;

  // handle the case where the token hasn't been set yet
  if (!token) return;

  // test to see if the token is expired and dispatch something if it has
  if (token.isExpired()) {
    store.dispatch({ type: 'TOKEN_EXPIRED' });
  }
});

render(
  <Provider store={store}><App /></Provider>,
  document.getElementById('<your-apps-attachment-point>'),
);

【讨论】：