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 相关文章推荐
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
jQuery的position()方法详解
Jul 19 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
npm 语义版本控制详解
Sep 10 Javascript
用webAPI实现图片放大镜效果
Nov 23 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+MSSQL分页的例子
2006/10/09 PHP
How do I change MySQL timezone?
2008/03/26 PHP
在JavaScript中调用php程序
2009/03/09 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
js Dialog 实践分享
2012/10/22 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python 加密与解密小结
2018/12/06 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python实现翻译word表格小程序
2020/02/27 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
三个儿子教学反思
2014/02/03 职场文书
高中军训感言800字
2014/03/05 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
公司会议策划方案
2014/05/17 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
高二数学教学反思
2016/02/18 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python