React
Context是关于向一个或多个子组件提供一些数据，而不必通过中间组件向下传递数据。没有内置的机制可以在页面加载之间持久保存状态，因此您需要为此使用另一种工具。
如果您尚未实现身份验证层，则需要研究其工作原理。有许多策略可以保持该状态，即使只是在使用基于cookie的存储中也是如此。JWT（JSON
Web令牌）是一种流行的方法，它使您可以将已签名的用户和客户端可读数据存储在cookie中，其代价是需要更多的工作来管理到期/续订并具有更大的有效负载。假设您采用的是这种方法，则可以执行以下操作：
import React from "react";import jwt from "jsonwebtoken"; // Add jsonwebtoken via npm/yarnfunction 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> ); }}session当安装AuthContextProvider时，它将解析cookie中的JWT令牌，并使用
userid存储在JWT中的值更新状态（如果存在）。
您可能会想
App用此组件包装Gatsby ，可以从
gatsby-browser.js和
gatsby-ssr.js文件中进行包装（如果还没有文件，请在仓库的根目录中创建它们）：
// gatsby-browser.jsimport React from "react"import AuthContextProvider from "components/AuthContextProvider"export const wrapRootElement = ({ element }) => <AuthContextProvider>{element}</AuthContextProvider>// gatsby-ssr.jsimport React from "react"export { wrapRootElement } from "./gatsby-browser"您仍然需要处理JWT令牌的生成（可能是从正在处理身份验证的后端），如果尚未将其持久保存在cookie中，则可以从浏览器访问它，则需要在相应位置处理该cookie的创建。您的应用程序生命周期。
