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 相关文章推荐
js导出格式化的excel 实例方法
Jul 17 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
搞定immutable.js详细说明
May 02 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
ES6实现图片切换特效代码
Jan 14 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+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
jquery each()源代码
2011/02/14 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
详解python时间模块中的datetime模块
2016/01/13 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
教育学专业毕业生的自我评价
2013/11/21 职场文书
安全教育感言
2014/03/04 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
入职担保书怎么写
2014/05/12 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
流动人口婚育证明
2014/10/19 职场文书
超市员工管理制度
2015/08/06 职场文书