vue登录路由验证的实现
更新时间：2017年12月13日 11:59:35 作者：羞羞的铁拳
这篇文章主要为大家详细介绍了vue登录路由验证的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue的项目的登录状态如果用vuex状态管理，页面一刷新vuex管理的状态就会消失，这样登录路由验证就没有意义了。可以将登录的状态写到web Storage中进行存储管理。
步骤如下：
1、在登录组件里，将登录状态写入web Storage里。(一般写入session Storage，会话关闭，存储数据自动删除)
if('登录成功')
{sessionStorage.setItem('accessToken' , 写入登录成功返回的登录令牌或者自定义的判断字符串) }
2、在需要登录验证的路由元信息里加入登录验证标识requiresAuth（自定义）
[html] view plain copy
routers: [
{ path: '/listInfo',
name: 'listInfo',
component: listInfo,
meta: { requiresAuth: true
}
}
]
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实例已经加载完成。这时候直接在浏览器的地址栏输入要去的路由，则不会定向到登录路由。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue中provide和inject的用法及说明(vue组件爷孙传值)
这篇文章主要介绍了vue中provide和inject的用法及说明(vue组件爷孙传值)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
今天小编就为大家分享一篇解决在Vue中使用axios用form表单出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue-element换肤所有主题色和基础色均可实现自主配置
这篇文章主要介绍了vue-element换肤所有主题色和基础色均可实现自主配置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue axios form-data格式传输数据和文件方式
这篇文章主要介绍了vue axios form-data格式传输数据和文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本文就讨论下怎么实现一个处理.vue文件的loader，以及用loader处理完.vue文件怎么把内容渲染在浏览器上并实现简单的响应式，对vue文件解析器相关知识感兴趣的朋友一起看看吧2022-06-06
在Vue.js开发中,经常会遇到需要展示搜索和列表的需求,为了提高代码复用性和开发效率,我们可以封装一个可配置的搜索列表组件,下面我们就来讲讲如何实现这样一个组件吧2023-08-08
element-ui中如何给el-table的某一行或某一列加样式
本文主要介绍了element-ui中怎么给el-table的某一行或某一列加样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了Vue3哈希模式实现锚点导航方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
Vue 处理异步加载顺序问题之如何在Konva中确保文本在图片之上显示
在处理Konva中的异步加载顺序问题时,确保在图像加载完成后再添加其他元素是关键,通过将回调函数放在imageObj.onload中,并正确处理变量捕获,我们可以确保文本总是绘制在图片之上,这不仅解决了显示顺序的问题,也为未来的调试提供了明确的方向,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要介绍了Vue中的slot使用插槽分发内容的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论