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(); 
    } 
};