React Context 旨在向一个或多个子组件提供一些数据,而无需通过中间组件向下传递数据。没有内置机制可以在页面加载之间保留状态,因此您需要使用另一个工具来实现这一点。
如果您尚未实现身份验证层,您将需要了解其工作原理。有许多策略可以维持该状态,即使只是使用基于 cookie 的存储也是如此。 JWT(JSON Web 令牌)是一种流行的方法,它允许您在 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>
);
}
}
这将解析 JWT 令牌session
加载 AuthContextProvider 时的 cookie 并使用 更新状态userid
存储在 JWT 中的值(如果存在)。
你可能想把盖茨比包装起来App
使用此组件,您可以从gatsby-browser.js
and 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 令牌(可能来自处理身份验证的后端),如果它尚未保存在 cookie 中,您可以从浏览器访问,您将需要在相关点处理该 cookie 的创建您的应用程序生命周期。