盖茨比的私人/登录部分+内容+网络化

Question

我希望我的内容+盖茨比+Netlify网站的一部分只对某些人可用。由于内容繁多，我不确定如何使用这些说明设置私有路由 - 例程是在构建上动态创建的。我不知道如何只设置一两个部分来登录并使所有其他部分都公开。有人可以提出建议或指出我的指南吗？

Answer 1

这是您链接的教程中的重要部分。

我不知道如何只设置一两个部分来登录并使所有其他部分都公开。有人可以提出建议或指出我的指南吗？

选择要设为私有的路线，例如/app/profile.这可以纯粹在 React 中完成：

//src/components/privateRoute.js
import React, { Component } from "react"
import { navigate } from "gatsby"
import { isLoggedIn } from "../services/auth"
const PrivateRoute = ({ component: Component, location, ...rest }) => {
if (!isLoggedIn() && location.pathname !== `/app/login`) {
navigate("/app/login")
return null
}
return <Component {...rest} />
}
export default PrivateRoute

您需要将登录凭据存储在某处。我建议将 React 内容与您的身份验证 API 一起使用。这里有一个可能对你有帮助的问题。

// AuthContextProvider class:
import React from "react";
export const AuthContext = React.createContext();
export class AuthContextProvider extends React.Component {
state = {
authenticated: false,
toggleLogin: () => {},
userid: null,
};
render() {
return (
<AuthContext.Provider
value={{
authenticated: this.state.authenticated,
userid: this.state.userid,
toggleLogin: () => {
const previousValueState = this.state.authenticated;
this.setState(state => ({
authenticated: !previousValueState,
userid: 2,
}));
},
}}
>
{this.props.children}
</AuthContext.Provider>
);
}
}

现在，您可以编辑路由器以使用PrivateRoute组件：

//src/pages/app.js
import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/layout"
import PrivateRoute from "../components/privateRoute"
import Profile from "../components/profile"
import Login from "../components/login"
const App = () => (
<Layout>
<Router>
<PrivateRoute path="/app/profile" component={Profile} />
<Login path="/app/login" />
</Router>
</Layout>
)
export default App

我建议不要担心内容。关于私人路线的概念由盖茨比和 React 处理。像Contentful这样的CMS与私人路由无关。如果您想为这部分提供更详细的答案，则需要更具体地回答您的问题。