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

网友投稿 247 2023-03-22


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

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/', {}, falshttp://e).then((data) => {

user = data

sessionStorage.setItem(cacheKey, JSON.stringify(user))

resolve(user)

}).catch(() => {

resolve(null)

})

}

})

}


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java计算交集,差集,并集的方法示例
下一篇:react实现一个优雅的图片占位模块组件详解
相关文章

 发表评论

暂时没有评论,来抢沙发吧~