时间:2021-05-26
vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了。可以将登录的状态写到web Storage中进行存储管理。
步骤如下:
1、在登录组件里,将登录状态写入web Storage里。(一般写入session Storage,会话关闭,存储数据自动删除)
2、在需要登录验证的路由元信息里加入登录验证标识requiresAuth(自定义)
[html] view plain copy
3、在全局钩子函数beforeEach中验证页面是否需要登录
router.beforeEach((to, from, next) => { //to即将进入的目标路由对象,from当前导航正要离开的路由, next : 下一步执行的函数钩子 if(to.path === '/login') { next() } // 如果即将进入登录路由,则直接放行 else { //进入的不是登录路由 if(to.meta.requiresAuth && !sessionStorage.getItem('accessToken')) {next({ path: '/login' })} //下一跳路由需要登录验证,并且还未登录,则路由定向到 登录路由 else { next() }} //如果不需要登录验证,或者已经登录成功,则直接放行 }注意点:beforeEach这个全局钩子要放到全局组件的前面,放到全局组件的后面,Vue实例已经加载完成。这时候直接在浏览器的地址栏输入要去的路由,则不会定向到登录路由。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求。对此,vue-route提供的beforeRouteUpdate可以方便地实现导航守卫
当做Vue-cli项目的时候需要在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-router提供的beforeEach可以方便地实现全局
什么是beforeEach?beforeEach是一个vue-router的路由导航钩子,一般我用它做路由守卫。什么是路由守卫?路由跳转前做一些验证,比如登录验
本文介绍了Vue+Flask实现简单的登录验证跳转,分享给大家,具体如下:文件位置:login.htmlLoginUsernamePasswordApplyva
本文实例为大家分享了vue+Element-ui实现登录注册表单的具体代码,供大家参考,具体内容如下登录注册表单验证通过Element-ui的表单实现登录注册的