在React Router上，即使页面刷新也如何保持登录状态？

Z时代
2024-01-10
分类：问答

我正在使用React，React Router和Redux创建一个网站。许多路由（页面）需要用户登录。如果用户未登录，则可以重定向到登录页面，如下所示：

function requireAuth(nextState, replace) {
    let loggedIn = store.getState().AppReducer.UserReducer.loggedIn;
    if(!loggedIn) {
        replace({
            pathname: '/login',
            state: {
                nextpathname: nextState.location.pathname
            }
        });
    }
}
ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <IndexRoute component={Index} />
                <Route path="login" component={Login} />
                <Route path="register" component={Register} />
                <Route path="dashboard" component={Graph} onEnter={requireAuth}>
                    ... some other route requires logged in ...
                </Route>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('entry')
);

请查看代码，如果用户未登录，我使用onEnter钩重定向到’/ login’路由。用于检查用户是否已登录的数据位于商店中，它将在用户登录后更新。

它工作正常，但是问题是当我刷新页面时，存储被重置并且用户未重新登录状态。

我知道发生这种情况是因为Redux存储只是内存存储，因此刷新页面将丢失该存储中的所有数据。

每次刷新时都检查服务器会话可能有效，但这可能有太多请求，因此这似乎是个坏主意。

将登录的状态数据保存到localStorage可能会起作用，但是在这种情况下，我应该检查每个AJAX调用是否失败，因为会话已过期或不存在某项请求而导致请求被拒绝，这似乎也是一个坏主意。

有没有一种方法可以更简单地解决这个问题？我的网站需要处理大量用户，因此我想尽可能减少XHR呼叫。

任何建议将不胜感激。

回答：

另一种方法是使用每个路由所需的JSON

Web令牌（JWT），并使用localStorage来检查JWT。

在前端，您具有登录和注册路由，该路由根据服务器上的身份验证向服务器查询JWT。一旦通过适当的JWT，您便可以将state的属性设置为true。您可以有一个退出路线，该路线允许用户将此状态设置为false。

包含您的路由的index.js可以在渲染之前检查本地存储，从而消除了刷新时丢失状态但保持一定安全性的问题。

您的应用程序中所有需要身份验证的路由都是通过组合组件呈现的，并通过在服务器API上进行授权的标头中包含JWT来加以保护。

进行设置需要一些时间，但是它将使您的应用程序“合理地”安全。

index.js 如下所示，在文件中路由之前检查本地存储，并根据需要将状态更新为已认证。

该应用程序通过JWT保护API的事实来维护安全性，这将解决您的刷新问题，并维护到服务器和数据的安全链接。

因此，在路线中您将具有以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import reduxThunk from 'redux-thunk';
import { AUTHENTICATE_THE_USER } from './actions/types';
import RequireAuth from './components/auth/require_auth';
import reducers from './reducers';
/* ...import necessary components */
const createStoreWithMiddleware = compose(applyMiddleware(reduxThunk))(createStore);
const store = createStoreWithMiddleware(reducers);
/* ... */
// Check for token and update application state if required
const token = localStorage.getItem('token');
if (token) {
    store.dispatch({ type: AUTHENTICATE_THE_USER });
}
/* ... */
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Index} />
        <Route path="login" component={Login} />
        <Route path="register" component={Register} />
        <Route path="dashboard" component={RequireAuth{Graph}} />
        <Route path="isauthenticated" component={RequireAuth(IsAuthenticated)} />
        ... some other route requires logged in ...
      </Route>
    </Router>
  </Provider>
  , .getElementById('entry'));

RequiredAuth是组成的组件，而Graphand

IsAuthenticated（可以是任意数量的适当命名的组件）都要求state.authenticatedtrue。

组件，在这种情况下Graph，IsAuthenticated 如果state.authenticatedtrue则呈现。否则默认返回到根路由。

然后，您可以构建一个这样的组合组件，通过它来呈现所有路线。在呈现之前，它将检查您所持有的用户是否已通过身份验证（布尔值）的状态为true。

import React, { Component } from 'react';
import { connect } from 'react-redux';
export default function (ComposedComponent) {
  // If user not authenticated render out to root
  class Authentication extends Component {
    static contextTypes = {
      router: React.PropTypes.object
    };
    componentWillMount() {
      if (!this.props.authenticated) {
        this.context.router.push('/');
      }
    }
    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.context.router.push('/');
      }
    }
    render() {
      return <ComposedComponent {...this.props} />;
    }
  }
  function mapStateToProps(state) {
    return { authenticated: state.authenticated };
  }
  return connect(mapStateToProps)(Authentication);
}

在注册/登录端，您可以创建一个存储JWT的操作，并通过操作创建者->

redux存储将状态设置为已认证。本示例利用axios运行异步HTTP请求响应周期。

export function signinUser({ email, password }) {
  // Note using the npm package 'redux-thunk'
  // giving direct access to the dispatch method
  return function (dispatch) {
    // Submit email and password to server
    axios.post(`${API_URL}/signin`, { email, password })
      .then(response => {
        // If request is good update state - user is authenticated
        dispatch({ type: AUTHENTICATE_THE_USER });
        // - Save the JWT in localStorage
        localStorage.setItem('token', response.data.token);
        // - redirect to the route '/isauthenticated'
        browserHistory.push('/isauthenticated');
      })
      .catch(() => {
        // If request is bad show an error to the user
        dispatch(authenticationError('Incorrect email or password!'));
      });
  };
}