Vue微信授權登錄前后端分離的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下Vue微信授權登錄前后端分離的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設公司，自成立以來公司不斷探索創(chuàng)新，始終堅持為客戶提供滿意周到的服務，在本地打下了良好的口碑，在過去的十載時間我們累計服務了上千家以及全國政企客戶，如成都銅雕雕塑等企業(yè)單位，完善的項目管理流程，嚴格把控項目進度與質量監(jiān)控加上過硬的技術實力獲得客戶的一致贊揚。

微信授權登錄是一個非常常見的場景,利用微信授權登錄,我們可以很容易獲取用戶的一些信息,通過用戶對公眾號的唯一openid從而建立數(shù)據(jù)庫綁定用戶身份.

微信授權登錄的機制這里不做詳述,微信官方文檔已有詳述,簡述就是通過跳轉微信授權的頁面,用戶點擊確認后,微信會跳到回調頁面,此時回調頁面url上會攜帶code參數(shù),通過code參數(shù),后端可以拿code換取擁護openid,或者用戶信息

在vue項目中,通常是一個SPA應用,即所有的頁面都是同一個html,通?，F(xiàn)在開發(fā)也是前后端徹底分離的,vue打包后生成的純靜態(tài)文件,甚至可以不經(jīng)過服務器,所以通過后端弄跳轉之類的都不太優(yōu)雅,本文即介紹此類場景的微信授權登錄

對于一個vue的SPA應用,我們通常可能有很多頁面,在微信公眾號上我們可能配置多個菜單,多個菜單對應vue的路由頁面,但是可能并不是每個頁面都需要用戶授權才能進入,有些頁面用戶不登錄也需要可以預覽,此時我們可以通過vue router來實現(xiàn)前端路由攔截

 router.beforeEach(async (to, from, next) => {
 if (to.matched.some(recode => recode.meta.noAuth)) {
  next()
 } else {
  // store已存在用戶信息直接進入頁面
  if (store.state.userInfo.nickname) {
   next()
   return
  }
  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) {
   store.commit('setUserInfo', res.data)
   next()
  } else {
   // 此狀態(tài)根據(jù)業(yè)務需求 可能不存在
   if (res.code === 201) {
    const openid = res.data.openid
    console.log(openid)
    store.commit('setOpenid', openid)
    localStorage.setItem('openid', openid)
    next('/enlist-info')
   }
   // 上面的獲取用戶信息接口,如果cookie,session拿不到用戶信息,且傳遞的code為空,則跳轉到微信授權頁面
   if (res.code === 202) {
    console.log(window.location.origin)
    console.log(to.fullPath)
    // 這個redirectUrl用 當前頁路徑或者tof.fullPath(將要進入的路徑)
    let redirectUrl = window.location.href
    redirectUrl = encodeURIComponent(redirectUrl)
    console.log(redirectUrl)
    const appid='wxdff0642c2120ea39'
    window.location.href = `https://open.weixin.qq.com/connect/oauth3/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
   }
  }
 }
})

上述代碼基本闡述了一個授權的過程,首先,我們在配置vue路由的時候,設置此路由是否需要登錄即給router的meta加一個noAuth:true的屬性,這個是處理不需要登錄的頁面,通過router.beforeEach進行判斷,如果是不需要登錄的頁面:noAuth,則直接next()讓其進入相應頁面.對于需要登錄的頁面,則讓后端配合,此時,后端寫一個獲取用戶信息的接口,前端則直接調用獲取用戶信息的接口,當然,不需要每個頁面都調用,獲取一次之后可以將用戶信息存入vuex中,所以通過判斷vuex里面有沒有用戶信息,如果已存在用戶信息,則進入頁面.沒有用戶信息那就調用后端獲取用戶信息的接口,說到這里,終于回到此文主題了,用戶信息是通過微信授權登錄拿到的,此時后端如何拿到用戶信息呢?這里,可以跟后端商議好,用戶綁定身份后,后端則可以通過設置cookie,token之類的保存這個用戶登錄狀態(tài),如果有相關狀態(tài),那么后端則可以直接返回用戶信息. 如果是首次進入,或者cookie,token之類的已失效,那么此時則會調用微信授權登錄了,如上述代碼所述,分為三種情況,

1. 通過cookie,token等,后端直接拿到了用戶信息,此時則拿到用戶信息直接進入頁面,同時把用戶信息存入vuex中

2. 沒有用戶信息的情況,此時也沒有cookie,token,那就需要重新調用微信授權登錄了,上面給出的兩種返回碼code=201,code=202的情況,當code=2是則由前端直接跳轉到微信授權頁面,而redirectUri則為將要進入的頁面,此時會發(fā)生什么呢?會跳到微信授權頁面,用戶點擊之后又回到了這個頁面,不同的是此時url上面已經(jīng)攜帶了code,前端通過字符串截取拿到code,發(fā)送給后端,后端即可通過code換取openid以及用戶信息了.

總結:

項目采用前后端完全分離方式,即打包后給的純靜態(tài)文件放在服務器,訪問index.html
后端不在接口處攔截,不需要后端跳轉微信授權登錄頁面,由前端路由來攔截跳轉,實現(xiàn)方法如3.
前端在需要用戶身份才能進入的頁面通過vue-router的 router.beforeEach鉤子函數(shù)攔截,此時調用獲取用戶信息接口,后端首先通過獲取cookie,token等判斷用戶,無相關信息返回201或202,當返回202的時候,前端跳轉到微信授權頁,redirecturi即為要進入的頁面的url,跳轉授權后微信會在url上面攜帶code回到當前頁,此時前端截取url上的code傳給后端,后端通過code在后端處理拿到用戶信息,openid等實現(xiàn)了授權登錄

以上是“Vue微信授權登錄前后端分離的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前名稱：Vue微信授權登錄前后端分離的示例分析-創(chuàng)新互聯(lián)
分享URL：http://muchs.cn/article2/eejic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、小程序開發(fā)、網(wǎng)站導航、網(wǎng)站制作、做網(wǎng)站、手機網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容