vue登录注册及token验证实现代码


Posted in Javascript onDecember 14, 2017

在大多数网站中,实现登录注册都是结合本地存储cookie、localStorage和请求时验证token等技术。而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框。

而在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为。

具体实现代码如下:

1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
 {
  path: '/',
  component: require('./views/Home'),
  meta: {
   requiresAuth: true
  }
 },
]
const router = new VueRouter({
 routes: routes
})
router.beforeEach((to, from, next) => {
 let token = window.localStorage.getItem('token') 
 if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {
  next({
   path: '/login',
   query: { redirect: to.fullPath }
  })
 } else {
  next()
 }
})
export default router

2. watch route对象。原理同上。

<script>
  // App.vue
  export default {
    watch:{
      '$route':function(to,from){
        let token = window.localStorage.getItem('token');



  if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {





  next({
 




  path: '/login',
 




  query: { redirect: to.fullPath }





  })




  } else {



     next()




  }
   
 }
  
}
  }
</script>

总结

以上所述是小编给大家介绍的vue登录注册及token验证实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript eval和JSON之间的联系
Dec 31 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
基于vue 实现token验证的实例代码
Dec 14 #Javascript
JavaScript实现左侧菜单效果
Dec 14 #Javascript
JavaScript实现全选取消效果
Dec 14 #Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 #Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 #Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 #Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 #Javascript
You might like
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
php数据访问之增删改查操作
2016/05/09 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
python统计日志ip访问数的方法
2015/07/06 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
python 定时修改数据库的示例代码
2018/04/08 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Python实现常见的回文字符串算法
2018/11/14 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
幼儿园老师寄语
2014/04/03 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
Python中的 Set 与 dict
2022/03/13 Python
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python