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 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
uniapp实现可滑动选项卡
Oct 21 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
js微信分享实现代码
2020/10/11 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
nodeJS微信分享
2017/12/20 NodeJs
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
linux下python抓屏实现方法
2015/05/22 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
go开发alertmanger实现钉钉报警
2021/07/16 Golang
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
Redis唯一ID生成器的实现
2022/07/07 Redis