reactjs - 如何在 Gatsby 站点中保留或重新提供 React Context

Question

我使用 React Context API 来存储用户经过身份验证的信息。

在开发模式下，当我输入任何重定向到 404 错误页面的 URL 时，上下文数据都会丢失。当我导航到有效页面时，之前登录的用户不再登录。

编辑:我刚刚使用 gatsby build 和 gatsbyserve 对此进行了测试。构建的 gatsby 站点在重定向到 404 错误页面时会保留上下文。但当导航到完全不同的 URL(例如 www.google.com)时，上下文仍然会丢失。 .

现在我的问题是:如何在不让用户再次手动登录的情况下重新提供上下文与登录信息？

这是我的 AuthContextProvider 包装类:

export class AuthContextProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: {} };
  }
  
  // ...
  
  render() {
    return (
      <AuthContext.Provider value={{ getUser: this.getUser, setUser: this.setUser }}>
        {this.props.children}
      </AuthContext.Provider>
    );
  }
}  

我将整个应用程序与上下文提供程序包装在根布局中:

const RootLayout = ({ children }) => {
  return (
    <AuthContextProvider>
      {children}
    </AuthContextProvider>
  );
}

Answer 1

React Context 的目的是向一个或多个子组件提供一些数据，而无需通过中间组件向下传递数据。没有内置机制可以在页面加载之间保留状态，因此您需要使用另一个工具来实现这一点。

如果您尚未实现身份验证层，您将需要了解其工作原理。有许多策略可用于维护该状态，即使只是使用基于 cookie 的存储也是如此。 JWT(JSON Web Token)是一种流行的方法，它允许您在 cookie 中存储签名的用户和客户端可读数据，但需要更多的工作来管理过期/续订并具有更大的有效负载。假设这就是您采取的方法，您可能会这样做:

import React from "react";
import jwt from "jsonwebtoken"; // Add jsonwebtoken via npm/yarn

function getCookieValue(a) {
  var b = document.cookie.match('(^|[^;]+)\\s*' + a + '\\s*=\\s*([^;]+)');
  return b ? b.pop() : '';
}

const AUTH_PUBLIC_KEY = "your JWT public key here"

export const AuthContext = React.createContext();

export class AuthContextProvider extends React.Component {
  state = {
    authenticated: false,
    userid: null,
  };

  componentDidMount() {
    jwt.verify(getCookieValue("session"), AUTH_PUBLIC_KEY, (err, session) => {
      if (!err && session.userid) {
        this.setState({ userid: session.userid, authenticated: true })
      }
    })
  }

  // Important: REMOVE THIS AFTER TESTING/DEV
  toggleLogin = () => {
    this.setState(state => ({
      authenticated: !state.authenticated,
      userid: 2,
    }));
  }

  render() {
    return (
      <AuthContext.Provider
        value={{
          ...this.state,
          toggleLogin: this.toggleLogin,
        }}
      >
        {this.props.children}
      </AuthContext.Provider>
    );
  }
}

这将在安装 AuthContextProvider 时解析 session cookie 中的 JWT token ，并使用存储在 JWT 中的 userid 值(如果存在)更新状态。

您可能希望使用此组件包装 Gatsby App，您可以通过 gatsby-browser.js 和 gatsby-ssr.js 文件(如果您还没有它们，请在存储库的根目录中创建它们):

// gatsby-browser.js
import React from "react"
import AuthContextProvider from "components/AuthContextProvider"

export const wrapRootElement = ({ element }) =>
  <AuthContextProvider>{element}</AuthContextProvider>

// gatsby-ssr.js
import React from "react"
export { wrapRootElement } from "./gatsby-browser"

您仍然需要处理生成 JWT token (可能来自正在处理身份验证的后端)，如果它尚未保存在 cookie 中，您可以从浏览器访问，您将需要在以下位置处理该 cookie 的创建:应用程序生命周期中的相关点。