Gatsby + contentful + Netlify 的私人/登录部分

Posted 2023-04-14

【中文标题】Gatsby + contentful + Netlify 的私人/登录部分

【英文标题】：Private/login section of Gatsby + contentful + Netlify

【发布时间】：2020-05-29 11:28:48

【问题描述】：

我希望我的内容 + Gatsby + Netlify 网站的一部分仅对某些人开放。由于内容丰富，我不确定如何使用these instructions 设置私有路由——这些例程是在构建时动态创建的。我不知道如何只设置一个或两个部分来登录并让所有其他部分公开。有人可以提出建议或给我指点指南吗？

【参考方案1】：

这是您链接的教程中的important bit。

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

选择一条您想设为私有的路由，例如/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 一起使用。这是一个question，可能会对您有所帮助。

// 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

我建议不要担心 Contentful。私有路由的概念由 Gatsby 和 React 处理。像 Contentful 这样的 CMS 与私有路由无关。如果您想对此部分有更详细的答案，您需要更具体地回答您的问题。