express 및 vue js를 사용하여 로그인 성공 후 특정 페이지로 리디렉션하는 방법

express 및 vue js를 사용하여 로그인 성공 후 특정 페이지로 리디렉션하는 방법

MPEN 스택을 사용하여 간단한 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로 수정되지 않는다는 것입니다.내가 뭘 잘못하고 있지?

누군가 이걸 우연히 발견하게 되면...

이 부분에서는 서버에서 반환해야 하는 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 서버 등)과 express(api 라우팅용) 모두에서 서버를 사용하는 경우에도 리다이렉트 문제가 발생할 수 있습니다.이는 express에서 리다이렉트 응답을 출력하면 프런트 엔드 dev 서버에서 CORS 문제가 발생하기 때문입니다.

혹시 모르니까:)

언급URL : https://stackoverflow.com/questions/48800553/how-to-redirect-to-a-specific-page-after-successful-login-using-express-and-vue