最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手——好好写代码(想多的同学赶紧去面壁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的源信息中,用于之后路由跳转的验证)
写到这里突然感觉这貌似谁都懂的啊,不管了写这么多,就当你是小白吧(哈哈哈)
下面直接上代码:
统一处理接口的文件api.js
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)
})
}
})
}