最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手——好好写代码(想多的同学赶紧去面壁5秒钟再过来往下看)~~~
我做的这个产品是课堂在线编程教学工具,由于涉及到商业问题,这里就不能和大家分享了,但是我可以把里面我认为很牛(zhuang)X(bi)的技术和大家分享分享啊。
如果你觉得我写的很 low的话欢迎加入igeekbar裙里来喷我啊,我在那里等你啊,我相信赞美会有很多故事哟。哈哈,废话不多说了,进入干货分享啦~~~
先从登录分享吧,登录是我写完项目后加上的,一开始没有考虑到登录问题,后来加的,看了一些人分享的登录,感觉都太牛逼了(主要我理解能力差看不懂)。最后自己搞了一套。
使用的技术:
- vue
- vue-router
- vuex
首先明确的一点vue是一个写但页面的框架,以前在做登录的时候,也许是后端来控制登录的状态,把登陆的信息会放在cookie里。前端也可以做登录验证的,这主要是基于但页面引入路由的功能得以实现的。
在vue-router里有个钩子函数 beforeEach (导航守卫)多霸气的名字,故名YY就是这是我家没我的邀请名片都给我滚蛋,还想过来和我一起看苍老师。beforeEach 接受三个参数(to, from, next)分别是to: 小伙要去哪里, from: 小伙从那里来, next: 美女您请进,小心路滑啊。姑且你们认为我写的很形象啊,如果你感到不服去看 文档 啊!
理解里 beforeEach 那我们就可以区搞事情了。基本的思路是:
- 我要从router的信息里面拿到 meta 用户的源信息,如果没有就让这屌丝滚蛋,收拾帅气点再来(也就是去登录)
- 如果没有源信息的话,就等跳到 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) }) } }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
vue登录,vue,登录验证
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]