Javascript 如何在gatsby中认证用户
我已经按照教程在我的Javascript 如何在gatsby中认证用户,javascript,reactjs,authentication,gatsby,Javascript,Reactjs,Authentication,Gatsby,我已经按照教程在我的gatsby项目中实现了身份验证。问题是我首先设置了项目,路由是从页面文件夹进行的,然后我实现了上述身份验证代码,但它仍然从页面文件夹而不是从app.js文件进行路由。请有人帮助我如何从app.js路由组件,而不是使用从页面文件夹 这是我的盖茨比·诺德档案 // Implement the Gatsby API “onCreatePage”. This is // called after every page is created. exports.onCreatePage
gatsby
项目中实现了身份验证。问题是我首先设置了项目,路由是从页面
文件夹进行的,然后我实现了上述身份验证代码,但它仍然从页面文件夹而不是从app.js文件进行路由。请有人帮助我如何从app.js路由组件,而不是使用从页面文件夹
这是我的盖茨比·诺德档案
// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
// page.matchPath is a special key that's used for matching pages
// only on the client.
if (page.path.match(/^\/app/)) {
page.matchPath = "/app/*"
// Update the page.
createPage(page)
}
}
这里是src/pages.app.js
import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/layout"
import Home from '../components/dashboard/home/container'
import Login from '../components/marketing/home/pulsemetrics'
import { isLoggedIn } from "../services/auth"
console.log('vvvvvvvvvvvvvvvvvvvvv')
const PrivateRoute = ({ component: Component, location, ...rest }) => {
console.log('hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjiiiiiiiiiiiiiiiiiii')
if (!isLoggedIn() && location.pathname !== `/app/login`) {
// If the user is not logged in, redirect to the login page.
navigate(`/app/login`)
return null
}
return <Component {...rest} />
}
const App = () => (
<Layout>
<Router>
<PrivateRoute path="/ddddddddddddddddddd" component={Home} />
<Login path="/" />
</Router>
</Layout>
)
export default App
从“React”导入React
从“@reach/Router”导入{Router}
从“./组件/布局”导入布局
从“../components/dashboard/Home/container”导入主目录
从“../components/marketing/home/pulsemetrics”导入登录名
从“./services/auth”导入{isLoggedIn}
console.log('vvvvvvvvv')
const privaterout=({component:component,location,…rest})=>{
console.log('HJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
如果(!isLoggedIn()&&location.pathname!==`/app/login`){
//如果用户未登录,请重定向到登录页面。
导航(`/app/login`)
返回空
}
返回
}
常量应用=()=>(
)
导出默认应用程序
您在App.js
中的路径前面应该有/App/
,因为您的PrivateRoute逻辑使用该路径检查登录。此外,您的gatsby-node.js文件真正的意思是,对于以app开头的路由,它应该创建一个新页面。您的src/pages/app.js
任务是定义如何创建这些页面(因为它们不是盖茨比通常生成的静态页面)
从“React”导入React
从“@reach/Router”导入{Router}
从“./组件/布局”导入布局
从“../components/dashboard/Home/container”导入主目录
从“../components/marketing/home/pulsemetrics”导入登录名
从“./services/auth”导入{isLoggedIn}
console.log('vvvvvvvvv')
const privaterout=({component:component,location,…rest})=>{
console.log('HJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
如果(!isLoggedIn()&&location.pathname!==`/app/login`){
//如果用户未登录,请重定向到登录页面。
导航(`/app/login`)
返回空
}
返回
}
常量应用=()=>(
)
导出默认应用程序
阅读盖茨比客户端专用路由以供参考或查看此github我们可以查看一下您的
src/pages/app.js
文件吗?@etarhan谢谢我更新了我的问题我尝试了这个。当我点击/app/home
时,它不会呈现任何内容<代码>Gatsby.js development 404页不,它也不工作。实际上,只有我在pages文件夹中定义的页面才有效。它仍然从pages文件夹中获取。我需要从上面的路由中呈现它们我猜你的pages文件夹中除了app.js、index.js和404.js之外的其他文件在某种程度上导致了问题是的,我的pages文件夹中还有其他文件创建路由。非常感谢。我想我已经接近目标了。我欠你一个小人情。我的路线的前缀是/app
,我不想这样。我只需要/
。我该怎么做?