最這次帶給大家的是如何用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)
})
}
})
}
相信看了以上介紹你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是如何用vue實作登入驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！
