如何通过react保持页面刷新时已认证的用户状态

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

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

Answer 1

在这种情况下，我将创建一个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;