Javascript 如何向MEVN堆栈身份验证应用程序添加路由保护

我正在尝试重新调整我在GitHub上找到的一个简单的Vue.js身份验证应用程序的用途，以便启用路由保护。该应用程序构建在MEVN堆栈（MongoDB、Express、Vue.js、Node）上，并直接基于以下GitHub repo:。该应用缺少路由防护，以防止用户在刷新后注销，同时在单击浏览器中的后退箭头后保持用户登录。为了解决这个问题，我尝试按如下方式重新配置路由页面（routes/index.js）：

import jwtDecode from 'jwt-decode'
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import Register from '@/components/Register'
import Profile from '@/components/Profile'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const token = localStorage.usertoken
  const decoded = jwtDecode(token)
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  return {
    email: decoded.email,
    password: decoded.password
  }
  if (requiresAuth && !email && !password) next('Login')
  else if (!requiresAuth && email && password) next('Profile')
  else next()
})
export default router

如您所见，我向名为

requiresAuth

的

profile

路由添加了一个元条件，并将其设置为true。然后，我在每个函数之前添加了一个

.beforeach

函数，该函数带有一个条件，将解码的电子邮件和密码与

requireauth

的状态进行比较。从理论上讲，即使在刷新配置文件后，以下内容也应允许用户保持登录状态：

  if (requiresAuth && !email && !password) next('Login')
  else if (!requiresAuth && email && password) next('Profile')
  else next()

…但屏幕上没有显示任何内容，而我不断收到控制台警告（不是错误），提示未定义

电子邮件和密码

。关于如何为这个MEVN应用程序实现路由保护有什么建议吗？谢谢

Firebase示例

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('profile')
  else next()
})

Login.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-6 mt-5 mx-auto">
                <form v-on:submit.prevent="login">
                    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" v-model="email" class="form-control" name="email" placeholder="Enter Email">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" v-model="password" class="form-control" name="password" placeholder="Enter Password">
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import router from '../router'
import EventBus from './EventBus'

export default {
  data () {
    return {
      email: '',
      password: ''
    }
  },

  methods: {
    login () {
      axios.post('users/login', {
        email: this.email,
        password: this.password
      }).then(res => {
        localStorage.setItem('usertoken', res.data)
        this.email = ''
        this.password = ''
        router.push({ name: 'Profile' })
      }).catch(err => {
        console.log(err)
      })
      this.emitMethod()
    },
    emitMethod () {
      EventBus.$emit('logged-in', 'loggedin')
    }
  }
}
</script>

请登录
电子邮件地址
密码
登录
从“axios”导入axios
从“../router”导入路由器
从“/EventBus”导入EventBus
导出默认值{
数据（）{
返回{
电子邮件：“”，
密码：“”
}
},
方法：{
登录（）{
axios.post（'用户/登录'{
电子邮件：this.email，
密码：这个是密码
})。然后（res=>{
localStorage.setItem（'usertoken'，res.data）
this.email=''
this.password=“”
router.push（{name:'Profile'}）
}).catch（错误=>{
console.log（错误）
})
this.emit方法（）
},
方法（）{
EventBus.$emit（'登录'，'登录'）
}
}
}

电子邮件

和

密码

未定义。首先，设法解决这个问题。您可能还希望防止无限循环。我不确定如何在路由器页面中定义电子邮件和密码。请参见我添加到问题中的上述Firebase示例。使用Firebase，我通常能够基于

Firebase.auth（）.currentUser

添加一个名为

currentUser

的变量。但是，对于MEVN堆栈，我不确定如何设置路由器页面，以便识别

当前用户

，并创建一个条件，将当前用户与

requireAuth

的状态进行比较。有没有办法将

currentUser

拉入路由器页面？那么，您想实现什么？每一页的授权？您还想验证登录名/密码吗？你还想要一个记住我的函数吗？您还想存储用户和密码，然后再次导入？这些是不同的事情…我希望用户在刷新页面后仍保持登录状态。当前，用户在刷新后注销。在我以前使用Firebase构建的演示中，上面的Firebase.before功能使用户即使在刷新后也可以保持登录状态。我想在MEVN堆栈路由器页面中启用类似的功能。用户如何登录？你有会话ID吗？或者如何在前端存储身份验证？您是否只存储用户名和密码并始终发送？