MEVN аутентификация

Question

Хорошо, так что я смотрю на это некоторое время.Я пытаюсь настроить простой шаблон стека MEVN с паспортной локальной аутентификацией.Это работает на моей производственной сборке, когда работает только порт 8081, но это очень неудобно для разработки.

Если я запускаю свой клиент на 8080 и сервер на 8081. Аутентификация работает, и я могу зарегистрировать пользователей и войти в системуно моя функция current_user не работает.Я терплю неудачу в isLoggedIn с isAuthenticated, это всегда ложно.Я посмотрел на другие дискуссии по этому поводу и подумал, что это проблема с корсом, но не нашел настройки, которая работает.Я также посмотрел на куки, но не был уверен в лучшей настройке.Я просматривал пару учебных пособий, и они просто приступили к сборке NPM и использованию производственной сборки, но это кажется реальной болью при сборке каждый раз, когда вы вносите изменения в компонент Vue.Я также попробовал настройку прокси-сервера для веб-пакета, но он, похоже, тоже ничего не изменил.

server.js

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const cors = require('cors');
const morgan = require('morgan');
const fs = require('fs');
const config = require('./config/Config');
const session = require('express-session');
// const cookieSession = require('cookie-session')
const passport = require('passport');
const app = express();
const router = express.Router();
const serveStatic = require('serve-static');
const history = require('connect-history-api-fallback');

app.use(morgan('combined'));
app.use(bodyParser.json());
// app.use(cookieSession({  
//   name: 'mysession',
//   keys: ['vueauthrandomkey'],
//   maxAge: 24 * 60 * 60 * 1000 // 24 hours
// }))
app.use(cors())

app.use(session({
    secret: config.SECRET,
    resave: true,
    saveUninitialized: true,
    cookie: { httpOnly: false }
  }))
app.use(passport.initialize());
app.use(passport.session());

//connect to mongodb
mongoose.connect(config.DB, { useMongoClient: true }, () => {
  console.log('Connection has been made');
})
.catch(err => {
  console.error('App starting error:', err.stack);
  process.exit(1);
});

// Include controllers
fs.readdirSync("controllers").forEach(function (file) {
    if(file.substr(-3) == ".js") {
      const route = require("./controllers/" + file)
      route.controller(app)
    }
  })

app.use(history());
app.use(serveStatic(__dirname + "/dist"));

router.get('/api/current_user', isLoggedIn, function(req, res) {
    console.log(req.user);
    if(req.user) {
      res.send({ current_user: req.user })
    } else {
      res.status(403).send({ success: false, msg: 'Unauthorized.' });
    }
  })

  function isLoggedIn(req, res, next) {
    console.log(req.isAuthenticated());
    if (req.isAuthenticated())
      return next();

    res.redirect('/');
    console.log('error! auth failed')
  }

router.get('/api/logout', function(req, res){
    req.logout();
    res.send();
  });
router.get('/', function(req, res) {
  res.json({ message: 'API Initialized!'});
});

const port = process.env.API_PORT || 8081;
app.use('/', router);
app.listen(port, function() {
  console.log(`api running on port ${port}`);
});

login.vue

<template>
<v-container>
  <v-form v-model="valid" ref="form" lazy-validation>
    <v-text-field
      label="Email"
      v-model="user.email"
      :rules="emailRules"
      required
    ></v-text-field>
    <v-text-field
      label="Password"
      v-model="user.password"
      required
    ></v-text-field>
    <v-btn
      @click="submit"
      :disabled="!valid"
    >
      submit
    </v-btn>
    <v-btn @click="clear">clear</v-btn>
  </v-form>
  </v-container>
</template>
<script>
import { http } from '@/config/http.js'
import axios from 'axios'
import bus from '@/bus'

export default {
  data: () => ({
    valid: true,
    user: {
        email: '',
        password: '',
    },
    emailRules: [
      v => !!v || 'E-mail is required',
      v => /\S+@\S+\.\S+/.test(v) || 'E-mail must be valid',
    ],
  }),
  methods: {
    submit() {
      http
        .post("/users/login/", this.user, {'headers': {'Content-Type': 'application/json'}})
        .then((response) => {
            this.$swal('Great!', 'You are ready to start!', 'success');
            bus.$emit('refreshUser');
            this.$router.push({ name: 'Home' });
        })
        .catch((error) => {
            const message = error.response.data.message;
            this.$swal('Oh oo!', `${message}`, 'error');
            this.$router.push({ name: 'login' });
        });
        },
      clear() {
      this.$refs.form.reset();
    },
  },
};
</script>

App.vue

<template>
  <div id="app">
    <h1 v-if="current_user">Current User {{ current_user.name }}</h1>
    <h1 v-else>Please Login or Register</h1>
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>
import './assets/stylesheets/main.css';
import axios from 'axios';
import bus from '@/bus';
import { http } from './config/http';


export default {
  name: 'App',
  data: () => ({
    current_user: null,
  }),
    mounted() {
    this.fetchUser();
    this.listenToEvents();
  },
  methods: {
    listenToEvents() {
      bus.$on('refreshUser', () => {
        this.fetchUser();
      });
    },
    async fetchUser() {
      http
      .get('/api/current_user/')
      .then((response) => {
        this.current_user = response.data.current_user;
      })
      .catch(() => {
      });
    },
  }
}
</script>

<style>

</style>