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 相关文章推荐
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
Javascript confirm多种使用方法解析
Sep 25 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
中国第一家无线电行
2021/03/01 无线电
德生BCL3000的电路分析和打磨
2021/03/02 无线电
附件名前加网站名
2008/03/23 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python中的匿名函数使用简介
2015/04/27 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python内置模块logging用法实例分析
2018/02/12 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python如何实现数据的线性拟合
2019/07/19 Python
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Python中常见的导入方式总结
2021/05/06 Python
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python