时间戳

首页 > 解决方案 > 有没有办法使用一些Javascript将Auth0登录按钮添加到导航栏

reactjs - 有没有办法使用一些Javascript将Auth0登录按钮添加到导航栏

问题描述

我正在尝试将 Auth0 按钮添加到导航栏，但是当我添加 javascript 时 jsx linter 不喜欢它。我需要条件，以便它显示给非注册用户。我尝试从另一个组件 ion React 导入它，并将其直接添加到 jsx 中，但没有成功。我不断收到 isAuthenticated' 未定义和 loginWithRedirect' 未定义。不知道下一步该怎么做。谢谢。

import $ from 'jquery'
import '../styles/nav.scss'
import button from '../components/GoogleButton/Button.jsx'
import { auth0 } from './auth0/react-auth0-spa'

export default class NavBar extends Component {
    componentDidMount() {
        $(document).ready(function() {
            $('.mobile-button a').click(function(e) {
                $(this)
                    .parent()
                    .parent()
                    .toggleClass('open')
                $(this).html($(this).html() === 'Close Menu' ? 'Menu' : 'Close Menu')
                e.preventDefault()
            })
        })
    }

    render() {
        return (
            <div>
                <header class='header'>
                    <div class='container'>
                        <h1 class='site-title'>Super Cool Web App!</h1>
                        <span class='site-tagline'>Because Andy made this!</span>
                    </div>
                </header>
                <nav class='main-nav'>
                    <div class='container'>
                        <ul>
                            <li class='mobile-button'>
                                <a href='/'>Menu</a>
                            </li>
                            <li>
                                <a href='/'>About</a>
                            </li>
                            <li>
                                {/* this is where the problem lies */}
                                {!isAuthenticated && (
                                    <button onClick={() => loginWithRedirect({})}>Log in</button>
                                )}
                            </li>
                            <li>
                                <a href='/'>Methods</a>
                            </li>
                            <li>
                                <a href='/'>Results</a>
                            </li>
                            <li>
                                <a href='/'>Contact</a>
                            </li>
                            <li>
                                <a href='/'>Methods</a>
                            </li>
                            <li>
                                <a href='/'>Results</a>
                            </li>
                            <li>
                                <a href='/'>Contact</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        )
    }
}```

标签： reactjsjsxauth0

解决方案

authO用于初始化您需要用于useAuthO访问项目中其他地方的 api。

将您的导入语句更改为：

import { useAuth0 } from "../react-auth0-spa";

然后解构 AuthO 方法isAuthenticated和loginWithRedirect.

就在渲染下和您的退货之前：

const {isAuthenticated , loginWithRedirect} = useAuth0

https://auth0.com/docs/quickstart/spa/react#create-the-navbar-component

推荐阅读