Vue实战之vue登录验证的实现代码


Posted in Javascript onOctober 31, 2017

最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手——好好写代码(想多的同学赶紧去面壁5秒钟再过来往下看)~~~

我做的这个产品是课堂在线编程教学工具,由于涉及到商业问题,这里就不能和大家分享了,但是我可以把里面我认为很牛(zhuang)X(bi)的技术和大家分享分享啊。

如果你觉得我写的很 low的话欢迎加入igeekbar裙里来喷我啊,我在那里等你啊,我相信赞美会有很多故事哟。哈哈,废话不多说了,进入干货分享啦~~~

先从登录分享吧,登录是我写完项目后加上的,一开始没有考虑到登录问题,后来加的,看了一些人分享的登录,感觉都太牛逼了(主要我理解能力差看不懂)。最后自己搞了一套。

使用的技术:

  1. vue
  2. vue-router
  3. vuex

首先明确的一点vue是一个写但页面的框架,以前在做登录的时候,也许是后端来控制登录的状态,把登陆的信息会放在cookie里。前端也可以做登录验证的,这主要是基于但页面引入路由的功能得以实现的。

在vue-router里有个钩子函数 beforeEach (导航守卫)多霸气的名字,故名YY就是这是我家没我的邀请名片都给我滚蛋,还想过来和我一起看苍老师。beforeEach 接受三个参数(to, from, next)分别是to: 小伙要去哪里, from: 小伙从那里来, next: 美女您请进,小心路滑啊。姑且你们认为我写的很形象啊,如果你感到不服去看 文档 啊!

理解里 beforeEach 那我们就可以区搞事情了。基本的思路是:

  1. 我要从router的信息里面拿到 meta 用户的源信息,如果没有就让这?潘抗龅埃?帐八??阍倮矗ㄒ簿褪侨サ锹迹?/li>
  2. 如果没有源信息的话,就等跳到 igeekbar 裙里来瞅瞅,拿到入场圈(也就是登录后拿到了返回结果并存在router的源信息中,用于之后路由跳转的验证)

写到这里突然感觉这貌似谁都懂的啊,不管了写这么多,就当你是小白吧(哈哈哈)

下面直接上代码:

在 router.js 路由中添加一下代码

// router.js
router.beforeEach((to, from, next) => {
 if (!to.meta.user) {
  // todo 请求接口获取数据
  loadUserData().then(user => {
   // 存放源信息
   to.meta.user = user
   // 存在 vuex 中
   store.state.user = user
   if(user){
    next()
   }else{
    next({
     path: '/'
    })
   }
  })
 } else {
  next()
 }
})

统一处理接口的文件api.js

// api.js
import axios from 'axios'

// 封装ajax 的 fetch
export let fetch = (method, url, data, forceLogin = true) => {
 return new Promise((resolve, reject) => {
  axios({
   ...data,
   method: method,
   url: url
  }).then(response => {
   resolve(response.data)
  }).catch(err => {
   reject(err)
  })
 })
}

// 获取用户信息
export let loadUserData = () => {
 return new Promise((resolve, reject) => {
  let user = null
  let cacheKey = 'authUserJsonStr'
  let authUserJsonStr = sessionStorage.getItem(cacheKey)
  if (authUserJsonStr) {
   user = JSON.parse(sessionStorage.getItem(cacheKey))
   resolve(user)
  } else {
   fetch('GET', '/api/auth_info/', {}, false).then((data) => {
    user = data
    sessionStorage.setItem(cacheKey, JSON.stringify(user))
    resolve(user)
   }).catch(() => {
    resolve(null)
   })
  }
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
jquery中post方法用法实例
Oct 21 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
ES6解构赋值的功能与用途实例分析
Oct 31 #Javascript
js原生日历的实例(推荐)
Oct 31 #Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 #Javascript
详解RequireJs官方使用教程
Oct 31 #Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 #Javascript
ES6解构赋值实例详解
Oct 31 #Javascript
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
详解Bootstrap插件
2016/04/25 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python正则表达式介绍
2012/08/06 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
军训学生自我鉴定
2014/02/12 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫