Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的示例分析

這篇文章主要為大家展示了“Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的示例分析”這篇文章吧。

使用的技術(shù)：

1. vue

2. vue-router

3. vuex

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

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

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

1. 我要從router的信息里面拿到 meta 用戶的源信息，如果沒(méi)有就讓這屌絲滾蛋，收拾帥氣點(diǎn)再來(lái)（也就是去登錄）

2. 如果沒(méi)有源信息的話，就等跳到 igeekbar 裙里來(lái)瞅瞅，拿到入場(chǎng)圈（也就是登錄后拿到了返回結(jié)果并存在router的源信息中，用于之后路由跳轉(zhuǎn)的驗(yàn)證）

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

下面直接上代碼:

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

// router.js
router.beforeEach((to, from, next) => {
 if (!to.meta.user) {
  // todo 請(qǐng)求接口獲取數(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)
   })
  }
 })
}

以上是“Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！