如何設置 MEVN 堆棧登錄身份驗證

Question

我正在使用 Vue.js、Node、Express 和 MongoDB 構建注冊/登錄身份驗證界面。 到目前為止，我已經成功地設置了我的Register.vue組件，以便將 email 和密碼輸入到 MongoDB 數據庫中，密碼使用bcrypt ZEFE90A8E604A7C840E88D03A67F6B7D 加密。 我現在正在嘗試在 users.js 中設置users.post('/login', (req, res) => {}路由，以便比較密碼和存儲在users.js中的密碼和 email 與密碼和登錄名中的 Z0C83F57C78310B4A39EFAB 中的 Z0C83F57C78310B4A39EFAB頁面。然后我希望將有效負載分配給一個token ，然后將該令牌傳遞給localStorage （請參閱store.js ）。

為了嘗試這個，我添加了一個路由users.get('/allUsers', (req, res) => {}來處理存儲數據的請求和響應，但不知道如何設置users.post('/login', (req, res) => {}以便將存儲的數據與Login.vue中的輸入數據進行比較，以便登錄。

關於如何實現這一目標的任何建議？ 謝謝：我的代碼如下：

登錄.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>

用戶.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);
    }
  }
})