Question

我尝试使用GatsbyJS创建个人投资组合网站，并希望通过登录来保护我网站的某些区域，确切地说，应该保护路径为/account的所有页面。 Auth0提供保护。但是，没有显示登录页面（我在其中提供了一些基本信息），而是直接将用户重定向到Auth0的登录页面。

我遵循了jlengstorf（https://www.youtube.com/watch?v=j-vuF2PYHmU&index=2&list=PLz8Iz-Fnk_eTpvd49Sa77NiF8Uqq5Iykx和https://github.com/jlengstorf/gatsby-auth0-app）的教程，我很确定自己实现了与他的解决方案类似的方法。

import React from "react"
import { Link } from "gatsby"

import ContainerUnauthenticated from "../components/containerUnauthenticated"

const IndexPage = () => {
    return (
        <div>
            <ContainerUnauthenticated>
                <p>
                    Here is some introducing text, just divs and ps, nothing special
                </p>
                <div style={{ textAlign: 'center' }}>
                    <Link to="/account/cv" className="waves-effect waves-default" style={{ color: '#039be5' }} >
                        <i class="fas fa-sign-in-alt" />
                            &nbsp;Please login here
                    </Link>
                </div>
            </ContainerUnauthenticated>
        </div >
    )
}

export default IndexPage

我还尝试了/account Link's属性中的to，但这还是行不通的。

我想首先显示IndexPage，因此用户可以阅读登录页面的基本信息，并可以单击“登录”按钮。

Answer 1

这可能是您的反应路线或其他地方的问题，因为您必须有目的地重定向到授权端点才能重定向到Auth0登录页面。同样，这可能是由于触发未经身份验证的事件而保护了索引的结果。希望这对您的追求有所帮助。

https://auth0.com/docs/quickstart/spa/react

用户立即重定向到Auth0登录页面，而不是登陆到IndexPage

1 个答案: