node.js - 使用express和vue js登录成功后如何重定向到特定页面？

Question

我正在使用 MVEN 堆栈开发一个简单的 CRUD 应用程序。我还使用 passportJs 添加了身份验证功能。但是我在重定向时遇到错误。我想我使用的路由有一些错误。我在下面分享了我的代码。

authRoutes.js

var express = require('express');
var authRoutes = express.Router();
var passport = require('passport'),
    LocalStrategy = require('passport-local').Strategy;

app = express();
// Require Item model in our routes module
var User = require('../models/User');
var Item = require('../models/Item');


passport.use(new LocalStrategy(
  function(username, password, done) {
    User.findOne({ username: username }, function(err, user) {
      if (err) { return done(err); }
      if (!user) {
        return done(null, false, { message: 'Incorrect username.' });
      }
      if (!user.validPassword(password)) {
        return done(null, false, { message: 'Incorrect password.' });
      }
      return done(null, user);
    });
  }
));

// Serialize user in session
passport.serializeUser((user, done) => {
  done(null, user.username);
});

passport.deserializeUser((username, done) => {
  const user = getUser(username);
  delete user.password;
  done(null, user);
});

authRoutes.route('/register').post(function (req, res) {
var user = new User(req.body);
      user.save()
    .then(user => {
    res.status(200).json({'user': 'user added successfully'});
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});

authRoutes.route('/login').post( function(req, res){
  passport.authenticate('local',{
    failureRedirect: '/',
    successRedirect: '/display',
    failureFlash: true,
  });
});



authRoutes.route('/display').get(function (req, res) {
  Item.find(function (err, items){
    if(err){
      console.log(err);
    }
    else {
      res.json(items);
    }
  });
});


module.exports = authRoutes

登录.vue

<template>
    <div class="row">
        <div class="col-md-6">
            <h1>Register User</h1>
            <form v-on:submit.prevent="registerUser">
                <div class="form-group">
                    <label for="">Email:</label>
                <input type="text" v-model="user.email">
            </div>
                <div class="form-group">
                    <label for="">Password:</label>
                <input type="password" v-model="user.password">
            </div>
            <button>Register</button>
            </form>
            <p v-if="isRegistered">Thanks for registering.</p>
        </div>
        <div class="col-md-6">
            <h1>Login</h1>
            <form v-on:submit.prevent="loginUser">
                <div class="form-group">
                    <label for="">Email:</label>
                <input type="text" v-model="loginData.email">
            </div>
                <div class="form-group">
                    <label for="">Password:</label>
                <input type="password" v-model="loginData.password">
            </div>
            <button>Login</button>
            </form>
        </div>
    </div>
</template>
<script>
    export default{
        data (){
            return{
                user:{},
                isRegistered: false,
                loginData:{}
            };
        },
        methods: {
            registerUser(){
                let uri = 'http://localhost:4000/auths/register';
              this.axios.post(uri, this.user).then((response) => {
                this.isRegistered = true;
                this.user = {};
              })
              .catch((err) => console.log(err));
            },

            loginUser(){
                let uri = 'http://localhost:4000/auths/login';
                debugger;
                this.axios.post(uri, this.loginData).then((response) => {
                    this.$router.push({name:'DisplayItem'});
                })
                .catch((err) => {
                    console.log(err);

                    this.$router.push({name:'Register'});
                });
            }
        }
    }
</script>

问题是，当用户名和密码正确时，它不会重定向到/display。我做错了什么。

Answer 1

万一有人偶然发现这个...

在这部分你捕获了 axios 的错误，它必须由服务器返回(例如，不是 200，不是重定向，如果我没记错的话)

loginUser(){
  let uri = 'http://localhost:4000/auths/login';
  debugger;
  this.axios.post(uri, this.loginData).then((response) => {
    this.$router.push({name:'DisplayItem'});
  })
  .catch((err) => {
    console.log(err);
    this.$router.push({name:'Register'});
  });
}

但是，在服务器中您并没有这样做，因为 passport 不知道在查找用户后要做什么(如本地策略中所定义)。

authRoutes.route('/login').post( function(req, res){
  passport.authenticate('local',{
    failureRedirect: '/',
    successRedirect: '/display',
    failureFlash: true,
  });
});

你可能会通过一些稍微不同的东西来实现你想要做的事情

passport.authenticate('local', {session: false}, (err, user, info) => {
  if (err) {
    // Handle error
  }

  // if no user we assume something went wrong
  if (!user) {
    return res.status(401).json({msg: 'Invalid mail or password'})
  }

  // call method injected by passport into express request object,
  // passing the user returned by passport strategy

  req.logIn(user, {session: false}, (err) => {
    if (err) {
      // Handle error
    }
    console.log("Login Exitoso")
    return res.status(200).json({msg:'Login succesfully'})
  })
})(req, res, next)

如果您同时使用服务器进行前端开发(如 webpack 开发服务器)和 express(用于 api 路由)，您可能还会遇到重定向问题，因为从 express 发出重定向响应会导致前端出现 CORS 问题-最终开发服务器。

以防万一:)