如何用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)
 })
 }
 })
}

相信看了以上介绍你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

JS的冒泡事件如何使用

在JS中class属性需要如何使用

原生JS如何实现AJAX、JSONP