Частный / логин раздел Гэтсби + содержательный + Netlify - PullRequest
Новая
       27

Частный / логин раздел Гэтсби + содержательный + Netlify

0 голосов
/ 13 февраля 2020

Мне бы хотелось, чтобы раздел моего содержательного сайта Gatsby + Netlify был доступен только определенным людям. Я не уверен, как настроить частные маршруты с этими инструкциями из-за наполненности - подпрограммы динамически создаются в сборке. Я не могу понять, как настроить только один или два раздела для входа в систему и оставить все остальные publi c. Может кто-нибудь сделать предложение или указать мне руководство?

1 Ответ

0 голосов
/ 14 февраля 2020

Это важный бит из учебника, который вы связали.

Я не могу понять, как настроить только один или два раздела для входа в систему и оставить все остальные опубликованы c. Может кто-нибудь сделать предложение или указать мне гида?

Выберите маршрут, который вы хотите сделать личным, например /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

Я бы посоветовал не беспокойтесь о содержательном. Концепцией о частных маршрутах занимаются Гэтсби и Реакт. CMS, такие как Contentful, не важны для частных маршрутов. Вы должны быть более конкретны c со своим вопросом, если хотите получить более подробный ответ для этой части.

...