Question

我试图重新利用我在GitHub上找到的一个简单的Vue.js身份验证应用程序，以启用路由防护。该应用程序基于MEVN堆栈（MongoDB，Express，Vue.js，Node）构建，并直接基于以下GitHub存储库：https://github.com/ArjunAranetaCodes/MoreCodes-Youtube/tree/master/mevn-mongodb-login-reg。该应用缺少路由防护，以防止用户刷新后注销，同时在单击浏览器中的后退箭头后仍保持用户登录。为了解决这个问题，我尝试重新配置路由页面（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

如您所见，我在名为profile的{{1}}路由中添加了一个元条件，并将其设置为true。然后，我添加了一个带有条件的requiresAuth函数，该函数将解码后的电子邮件和密码与状态.beforeEach进行比较。从理论上讲，以下内容应使用户即使刷新后也可以保持登录配置文件：

requiresAuth

...但是屏幕上什么都没有显示，而我不断收到if (requiresAuth && !email && !password) next('Login') else if (!requiresAuth && email && password) next('Profile') else next()的控制台警告（不是错误）。关于如何为此MEVN应用程序实现路由保护的任何建议？谢谢！

Firebase示例

email and password are not defined

Login.vue

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

如何将路由防护添加到MEVN堆栈身份验证应用

0 个答案: