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

时间:2019-09-16 18:51:49

标签: javascript node.js mongodb express vue.js

我试图重新利用我在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()
})

0 个答案:

没有答案