如何使用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

login.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。我做错了什么。

- Sree Nath

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

然而，在服务器端，您并没有这样做，因为护照不知道在查找用户之后要做什么（如本地策略中定义的）。

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 dev server）和express（用于api路由），则可能会遇到重定向问题，因为从express发出重定向响应将导致前端dev服务器上的CORS问题。

只是以防万一 :)

- Ian Sebastian