最這次帶給大家的是如何用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中文網其他相關文章!