繁体   English   中英

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

How to set up MEVN stack login authentication

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在使用Vue.js,Node,Express和MongoDB构建注册/登录身份验证界面。 到目前为止,我已经成功设置了Register.vue组件,以将电子邮件和密码输入到MongoDB数据库中,并使用bcrypt软件包对密码进行了加密。 我现在试图安装的users.post('/login', (req, res) => {}在路线users.js为了将存储在MongoDB中,在登录输入密码,电子邮件密码和电子邮件然后,我希望将有效负载分配给token ,然后将该令牌传递给localStorage (请参阅store.js )。

为此,我添加了一条路线users.get('/allUsers', (req, res) => {}来处理存储数据的请求和响应,但是不确定如何设置users.post('/login', (req, res) => {}以便将存储的数据与Login.vue中输入的数据进行Login.vue以便登录。

关于如何实现这一目标的任何建议? 谢谢! 我的代码如下:

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

问题暂未有回复.您可以查看右边的相关问题.
5 在服务堆栈中创建 Google 登录身份验证

我知道服务堆栈提供了一个插件来合并谷歌登录,但我们使用的是旧版本的服务堆栈,所以我们自己创建流程。 我们有一个自定义的 CredentialsAuthProvider,我们可以根据需要覆盖 TryAuthenticate 和其他方法。 我可以从 google apis 获取 Id 令牌,但现在我想 ...

6 如何使用Bitnami Trac堆栈设置Subversion身份验证

我已经在Windows服务器上安装了本机Bitnami Track Stack,并且可以与tortoiseSVN一起使用。 目前,所有用户都是匿名用户,可以检出并提交。 我已经阅读了bitnami网站上的有关设置svn身份验证(svnserve.conf)的信息,但是即使我重新启动了 ...

7 身份验证登录

我正在开发一个应用程序,正如我们看到的,有些应用程序可以使用该帐户登录,例如,在登录quora时,可以选择使用google或facebook登录。 我想使用三星帐户登录我的用户。 请帮忙!! ...

2014-10-31 12:15:05 1 48   android
8 服务堆栈的基本身份验证

我在我的Android应用程序中使用JsonServiceClient(使用Xamerin编写)。 我有一个测试客户端,它与servicestack网站上给出的HelloWorld示例一起使用。 无需身份验证即可正常运行并快速返回值。 现在我正在尝试将身份验证纳入混合,从非常基本的身份 ...

10 在 MERN 堆栈中进行登录身份验证后,我的登录页面未重定向到事件页面

当我登录我的 React 应用程序时。 用户已成功通过身份验证,但未重定向到我的“/events”页面。 当我输入用户名和密码,然后单击提交按钮时,它在控制台中显示已通过身份验证。但它没有重定向到任何地方,它在同一个登录页面中。 然后,当我刷新 webbage 时,标题会相应更改,但它位于同一登录页 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM