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进行数组追加方法小结
Jun 16 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
实习自我鉴定模板
2013/09/28 职场文书
30年同学聚会感言
2014/01/30 职场文书
文艺演出策划方案
2014/06/07 职场文书
篮球比赛口号
2014/06/10 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
个人工作保证书
2015/02/28 职场文书
学生安全责任协议书
2016/03/22 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技