如何在Gatsby网站中保留或重新提供React Context

如何在Gatsby网站中保留或重新提供React Context

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的创建。您的应用程序生命周期。