如何设置 MEVN 堆栈登录身份验证

Question

I am building a signup/login authentication interface with Vue.js, Node, Express, and MongoDB. So far, I have been successful in setting up my Register.vue component to enable inputting of email and password into a MongoDB database, with the password being encrypted with the bcrypt package. I am now attempting to setup the users.post('/login', (req, res) => {} route in users.js in order to compare the password and email stored in mongoDB with the password and email inputted in the login page. I wish to then assign the payload to a token , then pass that token to localStorage (see store.js ).

To attempt this, I have added a route users.get('/allUsers', (req, res) => {} to handle the request and response of the stored data, but am not sure how to set up users.post('/login', (req, res) => {} so that the stored data is compared with the inputted data in Login.vue in order to login.

Any recommendations on how to achieve this? Thanks: My code is below:

Login.vue

<template lang="html">
  <v-container>
    <v-form
      @submit.prevent="login()"
    >
      <v-text-field
        v-model="email"
        label="E-mail"
        required
      ></v-text-field>

      <v-text-field
        v-model="password"
        type="password"
        label="Password"
        required
      ></v-text-field>

      <v-btn type="submit" color="primary">Login</v-btn>
    </v-form>
  </v-container>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      email: "",
      password: ""
    }
  },
  methods: {
    async login() {
      await axios.post('http://localhost:5000/users/login', {
        email: this.email,
        password: this.password
      })
      await this.$store.dispatch("login")
      this.$router.push('/')
    }
  }
}
</script>

<style lang="css" scoped>
</style>

users.js

const express = require("express")
const users = express.Router()
const cors = require("cors")
const jwt = require("jsonwebtoken")
const bcrypt = require("bcrypt")

const User = require("../models/User")
users.use(cors())

process.env.SECRET_KEY = 'secret'

users.get("/allUsers", (req, res) => {
  User.find({}, 'email password', function (error, newData) {
    if (error) { console.error(error); }
    res.send({
      newData: newData
    })
  })
})

users.post("/register", (req, res) => {
  const today = new Date()
  const userData = {
    email: req.body.email,
    password: req.body.password,
    created: today
  }
  User.findOne({
    email: req.body.email
  })
  .then(user => {
    if (!user) {
      bcrypt.hash(req.body.password, 10, (err, hash) => {
        userData.password = hash
        User.create(userData)
        .then(user => {
          res.json({ status: user.email + ' registered' })
        })
        .catch(err => {
          res.send('error: ' + err)
        })
      })
    } else {
      res.json({ error: 'User already exists' })
    }
  })
  .catch(err => {
    res.send('error: ' + err)
  })
})

users.post('/login', (req, res) => {
  User.findOne({
    email: req.body.email,
  })
  .then(user => {
    if (user) {
      if (bcrypt.compareSync(req.body.password, user.password)) {
        const payload = {
          _id: user._id,
          email: user.email
        }
        let token = jwt.sign(payload, process.env.SECRET_KEY, {
          expiresIn: 1440
        })
        res.send(token)
      } else {
        res.json({ error: 'User does not exist' })
      }
    } else {
      res.json({ error: 'User does not exist' })
    }
  })
  .catch(err => {
    res.send('error: ' + err)
  })
})

module.exports = users

store.js

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const LOGIN = "LOGIN";
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGOUT = "LOGOUT";

export default new Vuex.Store({
  state: {
    isLoggedIn: localStorage.getItem("token")
  },
  mutations: {
    [LOGIN](state) {
      state.pending = true;
    },
    [LOGIN_SUCCESS](state) {
      state.isLoggedIn = true;
      state.pending = false;
    },
    [LOGOUT](state) {
      state.isLoggedIn = false;
    }
  },
  actions: {
    async login({
      commit
    }) {
      let result = await axios.get('http://localhost:5000/users/allUsers')
      localStorage.setItem('token', result.data.newData)
      commit(LOGIN); // show spinner
      return new Promise(resolve => {
        setTimeout(() => {
          commit(LOGIN_SUCCESS);
          resolve();
        }, 1000);
      });
    },
    logout({
      commit
    }) {
      localStorage.removeItem("token");
      commit(LOGOUT);
    }
  }
})