詳解Vue微信授權登入前後端分離較為優雅的解決方案

微信程式設計客棧授權登入是乙個非常常見的場景,利用微信授權登入,我們可以很容易獲取使用者的一些資訊,通過使用者對***的唯一openid從而建立資料庫繫結使用者身份.

微信授權登入的機制這裡不做詳述,微信官方文件已有詳述,簡述就是通過跳轉微信授權的頁面,使用者點選確認後,微信會跳到**頁面,此時**頁面url上會攜帶code引數,通過code引數,後端可以拿code換取擁護openid,或者使用者資訊

在vue專案中,通常是乙個spa應用,即所有的頁面都是同乙個html,通常現在開發也是前後端徹底分離的,vue打包後生成的純靜態檔案,甚至可以不經過伺服器,所以通過後端弄跳轉之類的都不太優雅,本文即介紹此類場景的微信授權登入

對於乙個vue的spa應用,我們通常可能有很多頁面,在微信***上我們可能配置多個選單,多個選單對應vue的路由頁面,但是可能並不是每個頁面都需要使用者授權才能進入,有些頁面使用者不登入也需要可以預覽,此時我們可以通過vue router來實現前端路由攔截

router.beforeeach(async (to from, next) => else

const code = geturl(window.location.href).code // 擷取url上的code ,可能沒有,則返回''空字串

let res = await api.post('/imsl/user/user-auth', [code]) // 獲取使用者資訊,後端可首先通過cookie,session等判斷,沒有資訊則通過code獲取

console.log(res)

// 返回使用者資訊

if (res.code === 200 && res.data.is_auth) else

// 上面的獲取使用者資訊介面,如果cookie,session拿不到使用者資訊,且傳遞的code為空,則跳轉到微信授權頁面

if (res.code === 202) &redirec程式設計客棧t_uri=$&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`

}} }

})上述**基本闡述了乙個授權的過程,首先,我們在配置vue路由的時候,設定此路由是否需要登入即給router的meta加乙個noauth:true程式設計客棧的屬性,這個是處理不需要登入的頁面,通過router.beforeeach進行判斷,如果是不需要登入的頁面:noauth,則直接next()讓其進入相應頁面.對於需要登入的頁面,則讓後端配合,此時,後端寫乙個獲取使用者資訊的介面,前端則直接呼叫獲取使用者資訊的介面,當然,不需要每個頁面都呼叫,獲取一次之後可以將使用者資訊存入vuex中,所以通過判斷vuex裡面有沒有使用者資訊,如果已存在使用者資訊,則進入頁面.沒有使用者資訊那就呼叫後端獲取使用者資訊的介面,說到這裡,終於回到此文主題了,使用者資訊是通過微信授權登入拿到的,此時後端如何拿到使用者資訊呢?這裡,可以跟後端商議好,使用者繫結身份後,後端則可以通過設定cookie,token之類的儲存這個使用者登入狀態,如果有相關狀態程式設計客棧,那麼後端則可以直接返回使用者資訊. 如果是首次進入,或者cookie,token之類的已失效,那麼此時則會呼叫微信授權登入了,如上述**所述,分為三種情況,

1. 通過cookie,token等,後端直接拿到了使用者資訊,此時則拿到使用者資訊直接進入頁面,同時把使用者資訊存入vuex中

2. 沒有使用者資訊的情況,此時也沒有cookie,token,那就需要重新呼叫微信授權登入了,上面給出的兩種返回碼code=201,code=202的情況,當code=2是則由前端直接跳轉到微信授權頁面,而redirecturi則為將要進入的頁面,此時會發生什麼呢?會跳到微信授權頁面,使用者點選之後又回到了這個頁面,不同的是此時url上面已經攜帶了code,前端通過字串擷取拿到code,傳送給後端,後端即可通過code換取openid以及使用者資訊了.

總結:本文標題: 詳解vue微信授權登入前後端分離較為優雅的解決方案

本文位址:

詳解Vue微信授權登入前後端分離較為優雅的解決方案

前後端分離 微信授權 跨域

微信授權登入

微信授權登入

相關推薦

前後端分離微信授權跨域