微信網頁登陸（Vue，hash模式路由）

前提說明

不想看說明能夠略過這節跳到後面看代碼

咱們的要跳轉的網址是放在微信那一串的 URL 中，若是你以前作過微信登陸就知道我說的是什麼，大概相似這樣

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd00cbfc8e872c336&redirect_uri=http://xxx.yuming.com/path/&response_type=code&scope=snsapi_userinfo&state=123&connect_redirect=1#wechat_redirect
複製代碼

其中咱們要放的重點是 redirect_uri=http://xxx.yuming.com/path/ 若是你的路由模式是 mode: 'history'，那麼你還須要後端支持設置處理刷新和空路由處理的 404 頁面，因爲種種緣由，後端沒法對此作支持時，咱們就用 mode:'hash' 路由，hash 路由是有 /#/ 來分隔，可是微信內部是不認識你的 hash，上面的一長串連接跳轉的過程當中，你的 URL 會被送到微信處理以後給你返回，返回來的時候會變成 http://xxx.yuming.com/path/?code=xxxxx#/，能夠看到這個時候你的 /#/ 不是緊跟着你的 path 了，至於爲何會這樣，這裏不詳細討論，這個時候咱們須要修復一下這個 url

修復 hash URL

// 若是大家是沒有 path 的，就把大家的通用域名 例如 com 傳進去
function fixHashUrlAndJump(pathname) {
  if (location.href.includes(`${pathname}/?code`)) {
    let href = location.href
    let url = href.substring(0, href.length - 2)
    let jingPosit = url.indexOf(`${pathname}/`) + pathname.length + 1
    let urlLeft = url.substring(0, jingPosit)
    let urlRight = url.substring(jingPosit, url.length)
    location.href = urlLeft + "#/" + urlRight
    return true
  } else {
    return false
  }
}
複製代碼

登陸邏輯

// 本人習慣在 App.vue 下作登陸操做以便有可能在生命週期時訪問 Vue 的 data 數據或其餘操做

import querystring from "querystring"
// 獲取請求參數
function getHashParams(url) {
  return querystring.parse(url.split("?")[1] || "{}")
}
// 修復 hash 路由 url
function fixHashUrlAndJump(pathname) {
  if (location.href.includes(`${pathname}/?code`)) {
    let href = location.href
    let url = href.substring(0, href.length - 2)
    let jingPosit = url.indexOf(`${pathname}/`) + pathname.length + 1
    let urlLeft = url.substring(0, jingPosit)
    let urlRight = url.substring(jingPosit, url.length)
    location.href = urlLeft + "#/" + urlRight
    return true
  } else {
    return false
  }
}
export default {
    name: 'App',
    methods: {
        login() {
            return new Promise((resolve, reject) => {
                // 第一步 若是在你 url 通過微信端處理帶回來的時候 url 已是亂的，那麼直接在這裏判斷一下需不須要作處理
                if (fixHashUrlAndJump("path")) return
                
                // 若是有 code 取出，沒有則值爲 undefined
                let code = getHashParams(location.href).code
                
                // 作一下 sessionStorage 存儲，頁面刷新直接從你的 sessionStorage 裏面取回來
                if (sessionStorage.getItem("somedata")) {
                    // 取出存儲至 Vuex 方便調用
                    this.$store.commit('setUser',{...})
                }
                
                // 若是沒有 code 就轉跳連接給微信處理 返回 帶 code 的 url
                if (!code) {
                  return (location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd00cbfc8e872c336&redirect_uri=http://xxx.yuming.com/path/&response_type=code&scope=snsapi_userinfo&state=123&connect_redirect=1#wechat_redirect`)
                }
                
                // 若是執行到這裏也說明 code 有了，還未登錄就直接登陸處理了
                this.$post('xxxxx/login', {code}).then(res => { resolve(res)} )
            })
        }
    }
}
複製代碼