Question

我正在为我的reactjs应用实现auth0授权

我已经创建了auth0帐户，并在Auth.js文件中传递了参数

我的Index.js和main.js代码在下面给出。

我面临的问题是我无法获得this.props.auth值。它在调用Auth0的按钮上的onClick事件中引发了错误：

TypeError：无法读取未定义的属性“ login”。

import auth0  from 'auth0-js';

export default class Auth {

     auth0 = new auth0.WebAuth({
     domain:"xxxxx.auth0.com",
     clientID:"xxxxxxxxxxxx",
     redirectUri:"http://localhost:3000/Callback",

     audience:"https://xxxx.auth0.com/userinfo",
     responseType:"token id_token",
     scope:"openid"

    });

    constructor(){
    this.login = this.login.bind(this);
    }

    login () {
        this.auth0.authorize();
    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from "react-router-dom";
import Auth from './Auth';


const auth= new Auth();
let state = {};
window.setState=(changes)=>{
  state = Object.assign({},state,changes);

};

/* eslint no-restricted-globals : 0 */
let initialState = {
  name :"user1",
  location :location.pathname.replace(/^\/?|\/$/g,""),
  auth

};

ReactDOM.render(
  <Router {...state}>
    <App />
  </Router>,
  document.getElementById("root")
);
window.setState(initialState);


serviceWorker.unregister();

main.js

import React, { Component } from "react";

export default class Main extends Component{
    render(){
        return(
            <div>

        <div>
            <h1> Please login here user </h1>
            <button onClick={this.props.auth.login}>Login</button>
            </div>
        </div>

        )
    }
}

Answer 1

我看不到您正在将该道具传递给Main组件。

您应该做的是

import Auth from './Auth';

const auth= new Auth();

export default class Main extends Component{
    render(){
        return(
            <div>

        <div>
            <h1> Please login here user </h1>
            <button onClick={auth.login}>Login</button>
            </div>
        </div>

        )
    }
}

使用auth0进行身份验证

1 个答案: