VUE開發SPA之較舒服的微信受權登陸

SPA單頁應用中微信受權登陸的一點思路

單頁應用應該如何解決微信受權登陸的尷尬跳轉？後退沒法返回？
主要遇到的問題就是
先進入單頁應用，一邊渲染頁面一邊判斷用戶有沒有登陸，當判斷到沒有登陸時異步數據請求已經發送出去了，而後要跳轉到微信受權頁面，這樣就浪費了一次網絡請求且用戶可能要去點擊這個數據告終果...跳走了！在受權成功後用戶點擊後退再次進行受權有沒有？？？
本文主要講述

對於單頁應用應該在哪一個階段獲取微信受權？
只考慮網站徹底依賴微信受權登陸，一進入就要以受權的身份進入

基本思路

核心是須要有個author.vue 叫它受權中間頁好了

vue開發過程當中的一些點子

因爲個人業務是徹底依賴微信受權登陸的，也就是用戶一進來就應該是已經完成受權的
爲了不讓用戶明顯感受到先進入網站而後又跳轉到微信受權頁面
咱們從vue-router下手
基本實現思路是：

• 不管使用哪一個url進入網站都會先觸發router.beforeEach鉤子
• 在router.beforeEach鉤子中判斷用戶當前登陸狀態
• 若沒有登陸則保存用戶進入的url並跳轉到author受權頁面
• author受權頁面完成微信受權以及token的寫入實現用戶登陸
• 獲取前面保存的用戶進入url並跳轉

通過這樣一個流程，用戶感受到的就是，不管從哪一個url進入SPA，都會先顯示author頁面，而後再進入本身想要進入的頁面，而不是先進入本身想要進入的頁面再閃到author頁面，這樣不只節省了資源也提高了用戶體驗，更重要的一點是！咱們的項目多了一個廣告頁面(無語...)！！！

先貼上個人實現代碼
用戶信息保存在Vuex中

// holdno是我本身定義的一個工具集 裏面有各類操做方法
router.beforeEach((to, from, next) => {
  if(!store.state.user.id && to.path != '/author'){
    // 第一次進入項目
    holdno.cookie.set('beforeLoginUrl', to.fullPath) // 保存用戶進入的url
    next('/author')
    return false
  }
  next()
})

下面來看一下author頁面的處理邏輯

created () {
    // 檢測會員有沒有登陸
    if(!holdno.cookie.get('user')){
      let ua = window.navigator.userAgent.toLowerCase()
      if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        // 跳轉到微信受權頁面
        window.location.href = this.webUrl + '/Wap/User/getOpenid'
      }
    }else{
      // 若是有token 可是vuex中沒有用戶登陸信息則作登陸操做
      this.login()
    }
},
methods: {
    login () {
      let url = this.webUrl + '/Wap/User/info'
      // 經過cookie中保存的token 獲取用戶信息
      this.$http.get(url).then(response => {
        response = response.body
        if(response){
          // 保存用戶登陸狀態(Vuex)
          this.$store.commit('user', response)
          setTimeout(() => {
            this.goBeforeLoginUrl() // 頁面恢復(進入用戶一開始請求的頁面)
          }, 2000)
        }else{
          this.$alert('服務器擼貓去惹 :(', 'wrong')
          if(holdno.cookie.get('user')){
            // 跳轉到微信受權頁面
            window.location.href = this.webUrl + '/Wap/User/getOpenid'
          }
        }
      })
    }
}

上述代碼中 window.location.href = this.webUrl + '/Wap/User/getOpenid'
這一段是後端請求微信受權登陸接口的地址，在後端獲取到用戶信息及openid後再次跳轉到author頁面而不是直接定向到用戶想要請求的位置，這樣作的緣由很簡單。

若是用戶跳轉到受權頁面，由後端獲取用戶信息並保存好登陸狀態，重定向到用戶請求的頁面，這時只要用戶點擊一下後退，全部的邏輯從新再來一遍有沒有？做爲一個不懂技術的用戶，應該也是很鬱悶，爲何後退仍是跳回來了呢？？？

因此獲取用戶信息後再次重定向到author頁面，由author作一箇中間頁檢測到獲取到用戶信息後在前端作一個跳轉，也就是代碼中的this.goBeforeLoginUrl()(跳轉到登陸前的url ...哈哈哈)，這時候用戶再點擊後退就會退回到author頁面而不是後端獲取用戶openid的url，但真的會再次顯示author頁面給用戶嗎？並不會，回看咱們路由鉤子的定義：

router.beforeEach((to, from, next) => {
  if(to.path == '/author' && store.state.user.id){
    // 用戶使用後退返回到受權頁，則默認回到首頁
    next('/index')
    return false
  }
  ...
})

後面部分這裏不重要，展現出來的則是關鍵部分，在再次跳轉至author前，路由鉤子被觸發，檢測到即將進入的頁面to.path == '/author'成立同時剛纔在this.login()中作了this.$store.commit('user', response)操做，因此if條件成立頁面被直接跳轉至'/index'首頁，因此在這一個流程中，用戶並無再次看到受權頁面，而是直接返回到了首頁，是否是很完美！

this.goBeforeLoginUrl()

// 登陸後跳轉方法
Vue.prototype.goBeforeLoginUrl = () => {
  let url = holdno.cookie.get('beforeLoginUrl')
  if(!url || url.indexOf('/author') != -1){
    router.push('/index')
  }else{
    if(url == '/'){
      url = '/index'
    }
    router.push(url)
    holdno.cookie.set('beforeLoginUrl', '')
  }
}

看完整個流程，author只講到邏輯處理，但它畢竟是一個頁面，也是要展現給用戶看的，只處理邏輯的話難道白花花的一片show給用戶嗎？固然不是！想必你們都瞭解app在初次啓動時都有一個廣告頁吧，咱們徹底能夠把author受權中間頁包裝成一個廣告頁，在用戶瀏覽花哨的圖片(廣告)時默默完成受權登陸的處理 :)

大概就是這麼個意思 :P

掃碼體驗

emmmm... 如今已是小程序的時代了，因此我把微信web站點給關掉了，沒辦法體驗了 很差意思。

但願能有大神交流更優解決方案。