21、Gatsby 网站的数据驱动特性与插件、启动器开发

Gatsby 网站的数据驱动特性与插件、启动器开发

1. 管理私有路由

为了验证用户访问受限内容的权限，我们可以创建一个 PrivateRoute 组件。该组件会检查用户是否已登录，如果未登录且当前路径不是 /app/login ，则会将用户重定向到登录页面。

1.1 创建 PrivateRoute 组件

// src/components/private-route.js
import React 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

1.2 在路由中使用 PrivateRoute 组件

接下来，我们需要将私有路由添加到 src/pages/app.js 的路由中：