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