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

我一直在关注使用React的Auth0教程，但我无法让它真正正常工作。单击登录按钮时，它将完成整个身份验证过程，但无法重定向到我指定的redirectUri。它将所有访问令牌信息附加到URL中，并且几乎打破了react-router。页面上没有任何内容加载。但是，如果我console.log本地存储，我看到正确的身份验证已经完成。如果我从网址中删除访问令牌信息，那么它只是服务器的主路由，它会检测到我已经过身份验证并允许我继续。

所以它不能正确地重定向。知道为什么吗？

Answer 1

如上所述，您已将history.replace('...')行注释掉。如果您正在关注Auth0 tutorial，那么这些历史记录会在处理身份验证流程时依赖它来执行各种重定向。单击“登录”按钮后，您很可能会被重定向到应用程序之外，再次转到auth0，然后再返回到应用程序。

然而！即使使用那些history.replace行，我个人也遇到了历史设置和路由器4的问题。我最终使用的是一个普通的旧window.location = "/"来处理重定向并且它们都正常工作，并且根据需要渲染组件。

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

<Router>
    <div>
        <Route exact path="/" component={Lobby}/>
        <Route
            path="/callback"
            render={(props) => {
                this.handleAuthentication(props);
                return <Callback {...props} auth={this.auth}/>
            }}
        />
    </div>
</Router>

其中handleAuthentication函数是auth0示例中的包装函数：

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

Auth0没有重定向到指定的URL（React）

1 个答案: