Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的實(shí)現(xiàn)代碼

最近一直在擼一個(gè)給大學(xué)生新生用的產(chǎn)品，在擼的時(shí)候有時(shí)候會(huì)發(fā)現(xiàn)自己力不從心，是不是我的能力下降，是不是我該放棄我的最熱愛的事業(yè)了？這對我的心靈造成了巨大的傷害，所以我決定向蒼老師起誓一定練好我這雙手——好好寫代碼（想多的同學(xué)趕緊去面壁5秒鐘再過來往下看）～～～

我做的這個(gè)產(chǎn)品是課堂在線編程教學(xué)工具，由于涉及到商業(yè)問題，這里就不能和大家分享了，但是我可以把里面我認(rèn)為很牛（zhuang）X（bi）的技術(shù)和大家分享分享啊。

如果你覺得我寫的很 low的話歡迎加入igeekbar裙里來噴我啊，我在那里等你啊，我相信贊美會(huì)有很多故事喲。哈哈，廢話不多說了，進(jìn)入干貨分享啦～～～

先從登錄分享吧，登錄是我寫完項(xiàng)目后加上的，一開始沒有考慮到登錄問題，后來加的，看了一些人分享的登錄，感覺都太牛逼了（主要我理解能力差看不懂）。最后自己搞了一套。

使用的技術(shù)：

1. vue
2. vue-router
3. vuex

首先明確的一點(diǎn)vue是一個(gè)寫但頁面的框架，以前在做登錄的時(shí)候，也許是后端來控制登錄的狀態(tài)，把登陸的信息會(huì)放在cookie里。前端也可以做登錄驗(yàn)證的，這主要是基于但頁面引入路由的功能得以實(shí)現(xiàn)的。

在vue-router里有個(gè)鉤子函數(shù) beforeEach （導(dǎo)航守衛(wèi)）多霸氣的名字，故名YY就是這是我家沒我的邀請名片都給我滾蛋，還想過來和我一起看蒼老師。beforeEach 接受三個(gè)參數(shù)（to, from, next）分別是to: 小伙要去哪里， from: 小伙從那里來， next: 美女您請進(jìn)，小心路滑啊。姑且你們認(rèn)為我寫的很形象啊，如果你感到不服去看 文檔 啊！

理解里 beforeEach 那我們就可以區(qū)搞事情了。基本的思路是：

1. 我要從router的信息里面拿到 meta 用戶的源信息，如果沒有就讓這屌絲滾蛋，收拾帥氣點(diǎn)再來（也就是去登錄）
2. 如果沒有源信息的話，就等跳到 igeekbar 裙里來瞅瞅，拿到入場圈（也就是登錄后拿到了返回結(jié)果并存在router的源信息中，用于之后路由跳轉(zhuǎn)的驗(yàn)證）

寫到這里突然感覺這貌似誰都懂的啊，不管了寫這么多，就當(dāng)你是小白吧（哈哈哈）

下面直接上代碼:

在 router.js 路由中添加一下代碼

// router.js
router.beforeEach((to, from, next) => {
 if (!to.meta.user) {
 // todo 請求接口獲取數(shù)據(jù)
 loadUserData().then(user => {
 // 存放源信息
 to.meta.user = user
 // 存在 vuex 中
 store.state.user = user
 if(user){
 next()
 }else{
 next({
 path: '/'
 })
 }
 })
 } else {
 next()
 }
})

統(tǒng)一處理接口的文件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)
 })
 }
 })
}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com