如何使用反应在页面刷新时维护经过身份验证的用户状态

Question

我有一些受保护的路由器，但我需要在页面刷新时保持状态。

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

const auth = {
    isAuthenticated: true // this would be an http call to get user data
}

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props) => (
        auth.isAuthenticated === true
        ? <Component {...props} />
        : <Redirect to="/login" />
    )} />
)

const Main = () => {

    return (
        <Switch>
            <Route path="/login" exact strict component={Login}/>
            <Route path="/logout" exact strict component={Logout}/>
            <PrivateRoute path="/profile" exact strict component={Profile}/>
        </Switch>
    )
}

export default Main

我应该在哪里拨打服务电话？在主应用程序中？在上下文中？

更新：我在 Main 中添加了一个检查，它调用发送我存储的令牌的 api。该调用可能返回 200 和数据或 401

const auth = {
    isAuthenticated: Api.status() // this is just a fetch to /status endpoint 
        .then(
            status => {
                console.log(status);
                return true;
            },
            error => {
                console.log(error);
                return false;
            }
        )
}

但是当我点击 /profile 时，它​​会立即将我重定向到登录（因为 isAuthenticated 是假的）

我的问题完全基于用户刷新页面（F5）其他场景工作正常的场景。对不起，如果我不够清楚，很高兴再次澄清任何事情！

Answer 1

在我看来，最好的方法是 local storage 将令牌保存在那里 在您的应用程序的根组件中的 componentDidMount() 中调度一个操作，并将令牌存储在 readucer state 中

Answer 2

您可以实现如下所示的身份验证上下文：https://usehooks.com/useAuth/

此外，将用户存储在 localStorage（或您偏好的存储）中，当 auth-context 挂载时，从 localStorage 读取并设置初始值，如下所示：

const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')));

这样，在重新加载页面时，受保护的路由将自动重定向（或它们应该在经过身份验证的状态下执行的任何操作）。

Answer 3

在这种情况下，我会制作一个 AuthContext 组件。通过使用上下文提供程序，您可以在应用中的任何位置访问用户登录状态。

import { createContext } from 'react';

const AuthContext = createContext({
  token: null,
  userId: null,
  login: () => {},
  logout: () => {}
});

export default AuthContext;

并在您的应用程序的最高级别提供此信息。

import React, { useState } from 'react';
import { Route, Switch } from 'react-router-dom';
import AuthContext from './context/AuthContext';

function App() {
  const [token, setToken] = useState(null);
  const [userId, setUserId] = useState(null);

  const login = (token, userId) => {
    setToken(token);
    setUserId(userId);
  };

  const logout = () => {
    setToken(null);
    setUserId(null);
  };

  return (
     <Switch>
        <Route path="/login" exact strict component={Login}/>
        <Route path="/logout" exact strict component={Logout}/>
        <PrivateRoute path="/profile" exact strict component={Profile}/>
     </Switch>
  )
}

export default App;

然后在登录/注销表单中调用数据库或本地存储。

import React, { useContext } from 'react';
import AuthContext from '../context/AuthContext';

function Auth() {
  const { login } = useContext(AuthContext);

  const submitHandler = () => {
    // Make the call here
  };

  return (
    <Form onSubmit={submitHandler}>
     // Put your login form here
    </Form>
  );
}

export default Auth;