auth0 不起作用，回调时出现 404 错误

Question

我收到回调错误。我得到登录屏幕，我登录但是当它返回 /Home 页面时，它会抛出 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

这是我的授权服务文件

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

我有一种感觉，这是一个很小的错误。如果这不起作用，我将返回我不想要的 passport.js。

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 配置选项。