代码之家 › 专栏 › 技术社区 › Taylor Austin

历史将“history/createBrowserHistory”中的“not working”替换为Auth0

auth0 browser-history reactjs

Taylor Austin · 技术社区 · 6 年前

我正在尝试使用重定向用户 history.replace('/user') 在我的应用程序中,但当我这样做时,它不会起任何作用。我正在使用Auth0并遵循他们的指南: https://auth0.com/docs/quickstart/spa/react/01-login

当我在登录后重定向时,它会显示 /user 在url中,但什么都没有发生,我在 callback 组成部分如果我打中了 logout 它应该重定向到用户组件,但它也不起作用。它只是显示 /用户 在浏览器中,并不会实际将其带到页面。

import auth0 from 'auth0-js';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

export default class Auth {
  constructor() {
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.handleAuth = this.handleAuth.bind(this);
    this.isAuth = this.isAuth.bind(this);
  }

  auth0 = new auth0.WebAuth({
    domain: 'taustin.auth0.com',
    clientID: 'IL1cmtElngJNYF3Ncjpt3pCRA5NFIDZw',
    redirectUri: 'http://localhost:3000/callback',
    audience: 'https://taustin.auth0.com/userinfo',
    responseType: 'token id_token',
    scope: 'openid'
  });

  handleAuth() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        // redirect user to home page
        history.replace('/user');
      } else if (err) {
        // redirect user to home page with error
        history.replace('/user');
      }
    });
  }

  setSession(authResult) {
    // Set how long the access token will last
    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);
    // redirect user to home page or desired page
    history.replace('/user');
  }

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

  isAuth() {
    // Check whether the current time is past the
    // Access Token's expiry time
    // If not expires at exist should automatically return false
    let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return new Date().getTime() < expiresAt;
  }

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

1 回复 | 直到 6 年前

Theo Wittkovskiy 6 年前

我想这应该能解决你的问题。

import React, {Component} from 'react';
import { Router } from 'react-router';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();   

class App extends Component {

   render(){
       return (
           <Router history={history}>   //pass in your custom history object
                // your routes come here
           <Router />
       )
   }
}