Vue实战之vue登录验证的实现代码
最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手——好好写代码(想多的同学赶紧去面壁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 importaxiosfrom'axios' //封装ajax的fetch exportletfetch=(method,url,data,forceLogin=true)=>{ returnnewPromise((resolve,reject)=>{ axios({ ...data, method:method, url:url }).then(response=>{ resolve(response.data) }).catch(err=>{ reject(err) }) }) } //获取用户信息 exportletloadUserData=()=>{ returnnewPromise((resolve,reject)=>{ letuser=null letcacheKey='authUserJsonStr' letauthUserJsonStr=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) }) } }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。