Auth0不重定向到指定的URL（反应）

Question

auth.js

import auth0 from 'auth0-js'; 

export default class Auth { 
    constructor() { 
     this.auth0 = new auth0.WebAuth({ 
      domain: '<properURL>', 
      clientID: '<properID>', 
      redirectUri: 'http://localhost:3000/', 
      audience: '<blahblah>', 
      responseType: 'token id_token', 
      scope: 'openid' 
     }); 
     this.login = this.login.bind(this); 
     this.logout = this.logout.bind(this); 
     this.handleAuthentication = this.handleAuthentication.bind(this); 
     this.isAuthenticated = this.isAuthenticated.bind(this); 
    } 

    login() { 
     // console.log(this.auth0); 
     this.auth0.authorize(); 
    } 
    handleAuthentication() { 
     this.auth0.parseHash((err, authResult) => { 
     if (authResult && authResult.accessToken && authResult.idToken) { 
      this.setSession(authResult); 
      // history.replace('/lobby'); 
     } else if (err) { 
      // history.replace('/lobby'); 
      console.log(err); 
     } 
     }); 
    } 

    setSession(authResult) { 
     // Set the time that the access token will expire at 
     let expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime()); 
     localStorage.setItem('access_token', authResult.accessToken); 
     localStorage.setItem('id_token', authResult.idToken); 
     localStorage.setItem('expires_at', expiresAt); 
     // navigate to the home route 
     // history.replace('/lobby'); 
    } 

    logout() { 
     // Clear access token and ID token from local storage 
     localStorage.removeItem('access_token'); 
     localStorage.removeItem('id_token'); 
     localStorage.removeItem('expires_at'); 
     // navigate to the home route 
     // history.replace('/lobby'); 
    } 

    isAuthenticated() { 
     // Check whether the current time is past the 
     // access token's expiry time 

     //return localStorage.length > 0; 
     // console.log(localStorage) 
     let expiresAt = JSON.parse(localStorage.getItem('expires_at')); 
     return new Date().getTime() < expiresAt; 
    } 
} 

Lobby.jsx

import React, { Component } from 'react'; 
import Auth from '../Auth/Auth.js'; 
import { 
    HashRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 

export default class Lobby extends Component { 
    constructor(props) { 
     super(props) 
     this.auth = new Auth(); 
     this.state = { 
      meep: 'whooosh' 
     } 
    } 
    render() { 
     return (
      <div> 
       {!this.auth.isAuthenticated() ? 
       <button onClick={this.auth.login}>Please Login to Play</button> 
       : 
       <Link to='/room'> 
       <h1>Click here to join game</h1> 
       </Link> 
       } 
      </div> 
     ); 
    } 
} 

我一直在关注的Auth0教程与工作的反应，但我不能让它实际上正常工作。点击登录按钮时，它会经历整个身份验证过程，但无法重定向到我指定的redirectUri。它将所有访问令牌信息附加到URL中，并且几乎中断了反应路由器。页面上没有任何内容加载。但是，如果我console.log本地存储，我看到正确的身份验证已完成。如果我从url中删除访问令牌信息，所以它只是服务器的主路由，它会检测到我已通过身份验证并允许我继续。

所以它只是不正确的重定向。任何想法为什么？

Answer 1

正如你所写，你有history.replace('...')行注释掉。如果你正在关注Auth0 tutorial，那么这些历史记录就是它在处理认证流程时所依赖的各种重定向。一旦你点击登录按钮，你很可能被重定向到你的应用程序，auth0，然后回到你的应用程序。

但是！即使有这些history.replace线路，我个人也遇到了他们的历史记录设置问题，并且反应了路由器4.我最终使用的是一个普通的旧版本window.location = "/"来处理重定向，它们都正常工作，并根据需要重新渲染组件。

如果您使用的是反应路由器4，您可能还需要确保您有回调路由设置。例如：

​​

其中handleAuthentication功能是包装函数从auth0例如：

handleAuthentication = (props, replace) => { 
    if (/access_token|id_token|error/.test(props.location.hash)) { 
     this.auth.handleAuthentication(); 
    } 
};