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 路由中添加一下代码

{ 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

// 封装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)
})
}
})
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/vue/35448.html

Vue实战之vue登录验证的实现代码

相关推荐