这篇文章主要为大家展示了“Vue实战之vue登录验证的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue实战之vue登录验证的示例分析”这篇文章吧。
使用的技术：
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登录验证的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
