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对象模型-执行模型
Apr 28 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 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 编程请选择正确的文本编辑软件
2006/12/21 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
js调用后台servlet方法实例
2013/06/09 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
Mac下安装vue
2018/04/11 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
python 队列详解及实例代码
2016/10/18 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
酒店出纳岗位职责
2013/12/29 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
五一手机促销方案
2014/03/08 职场文书
班班通校本培训方案
2014/03/12 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
优秀应届生求职信
2014/06/16 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS