auth0 is not working、コールバックで404エラー

Question

コールバックエラーが発生しています。ログイン画面が表示され、ログインしますが、/ホームページに戻ると、404エラーが表示されます。私は流れとエラーhereの小さなビデオを記録しました。

私はここに私のコードを貼り付けています

import React from 'react' 
import {Route, IndexRedirect} from 'react-router' 
import AuthService from '../utils/AuthService' 
import Container from './Container' 
import Home from './Home/Home' 
import Login from './Login/Login' 

const auth = new AuthService("omitted by me","app1163.auth0.com"); 

// onEnter callback to validate authentication in private routes 
const requireAuth = (nextState, replace) => { 

if (!auth.loggedIn()) { 
replace({ pathname: '/Login' }) 
} 
} 

export const makeMainRoutes =() => { 
return (
    <IndexRedirect to="/Home" /> 
    <Route path="Home" component={Home} onEnter={requireAuth} /> 
    <Route path="login" component={Login} /> 
</Route> 
) 
} 

export default makeMainRoutes 

これは、私は、それは非常に小さなミス感じだしている私のAuthServiceファイル

import Auth0Lock from 'auth0-lock' 
import { browserHistory,hashHistory } from 'react-router' 

export default class AuthService { 
constructor(clientId, domain) { 
// Configure Auth0 
this.lock = new Auth0Lock(clientId, domain, { 
auth: { 
redirectUrl: 'https://yakyik-experiment-restlessankur.c9users.io/Home', 
responseType: 'token' 
} 
}) 
// Add callback for lock authenticated event 
this.lock.on('authenticated', this._doAuthentication.bind(this)) 
// binds login functions to keep this context 
this.login = this.login.bind(this) 
} 

_doAuthentication(authResult) { 
// Saves the user token 
this.setToken(authResult.idToken) 
// navigate to the home route 
browserHistory.replace('/Home') 
} 

login() { 
// Call the show method to display the widget. 
this.lock.show() 
} 

loggedIn() { 
// Checks if there is a saved token and it's still valid 
return !!this.getToken() 
} 

setToken(idToken) { 
// Saves user token to local storage 
localStorage.setItem('id_token', idToken); 
console.log("this is token ",idToken) 
} 

getToken() { 
// Retrieves the user token from local storage 
return localStorage.getItem('id_token') 
} 

logout() { 
// Clear user token and profile data from local storage 
localStorage.removeItem('id_token'); 
} 
} 

です。これでうまくいかなければ、私はパスポートに戻ってきます。

var express = require('express'); 
var path = require('path'); 
var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var api = require("./routes/api.js"); 
var mongoose = require("mongoose"); 
var dbUrl = "mongodb://ankur1163:lightbulb1@ds013946.mlab.com:13946/ank1163"; 
mongoose.connect(dbUrl,function(err,res){ 



if(err){ 
    console.log("there is error in connecting mongodb"+err) 
} 
else(
    console.log("connection to mongodb succesfull"+dbUrl) 
) 

}); 

var index = require('./routes/index'); 
//var users = require('./routes/users'); 

var app = express(); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'hjs'); 

// uncomment after placing your favicon in /public 
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use('/', index); 
app.use('/api', api); 

// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 

// error handler 
app.use(function(err, req, res, next) { 
    // set locals, only providing error in development 
    res.locals.message = err.message; 
    res.locals.error = req.app.get('env') === 'development' ? err : {}; 

    // render the error page 
    res.status(err.status || 500); 
    res.render('error'); 
}); 

module.exports = app; 

Answer 1

あなたのリプレイ映像をもとに、全ページのリダイレクトが（消えるコンソールログで示される）が起こっている、いないクライアント側のルート変更。これは、lockにredirectUrlオプションを使用しているために発生しています。

ご紹介していないサーバーコードは、おそらく/Homeという名前のパスを処理しません。あなたはおそらくapp.get('/', function() {...})を実行します。これはデフォルトルート/にのみ一致します。

あなたは

app.get('/*', function() {...}) 

あなたが作ることができるもう一つの変化（おそらくどんな上記の変更のようなものを必要としない）のようなもので、クライアント上でレンダリングするすべてのルートをキャッチすることができます今のフルをしないことですページリダイレクト。 redirectUrl設定オプションを削除するだけのようです。