Есть ли способ добавить кнопку входа Auth0 на панель навигации с помощью некоторого JavaScript - PullRequest
Новая
       8

Есть ли способ добавить кнопку входа Auth0 на панель навигации с помощью некоторого JavaScript

1 голос
/ 24 октября 2019

Я пытаюсь добавить кнопку Auth0 на панель навигации, но jsx linter не нравится, когда я добавляю javascript. Мне нужно условное, так что оно появляется для незарегистрированных пользователей. Я попытался импортировать его из другого компонента ион 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>
        )
    }
}```

1 Ответ

2 голосов
/ 24 октября 2019

authO для инициализации вам необходимо использовать useAuthO для доступа к API в другом месте вашего проекта.

Измените оператор импорта на: 

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

Затем деконструируйте методы AuthOisAuthenticated и loginWithRedirect.

Прямо под рендером и перед вашим возвратом поставьте: 

const {isAuthenticated , loginWithRedirect} = useAuth0

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

...