vue微信授權登錄

VueCLI微信授權登錄

前言

使用Vue開發的SPA項目H5版需要在微信端進行微信授權登錄。此次項目Mobile端與PC端是部署在同一服務器的不同目錄下的。故移動端和PC端的訪問路徑是保持一致的，只是子域名有所差異。為了保持路徑的一致性，移動端也采用了同PC端一樣的路由模式，即history模式。

History模式和Hash模式

vueSPA單頁面項目中使用的vue-router路由有hash模式和history模式兩種，其默認是hash模式。history模式與hash模式的區別主要有：

• hash模式下地址欄的URL路徑中會包含一個‘#’號字符，而history模式下地址欄的URL中沒有‘#’號。相對來說，history模式比hash模式看起來要美觀些。
• 訪問路勁和URL參數位置、拼接先后順序有所差異。history模式下路徑緊接根域名，其后拼接URL地址所需的參數；hash模式下，根域名后緊接的是URL所需的參數，其次是‘#’拼接所訪問的文件所在服務器的路徑。
• 兩種路由模式的地址跳轉方式頁有所差異。具體差異請訪問 vue-router官方網站 進一步了解，並根據所需選擇合適的路由模式。

基本流程

代碼思路

因為需要先進行微信授權，所以當用戶打開網頁時會優先進行用戶授權信息校驗，為了提升用戶體驗，避免用戶明顯感覺到微信授權時的頁面跳轉，故我們在vue-router的全局權限中加以控制，即在路由生命周期鈎子的router.beforeEach階段進行攔截處理。
無論從打開的URL是哪一個路徑下進行訪問的，都會優先觸發router.beforeEach生命周期鈎子函數，在router.beforeEach中判斷用戶信息，依據是否存在用戶信息來判斷是否進行微信授權。
注：此次將微信授權的信息存儲在了sessionStorage中。

router.js文件代碼：

router.beforeEach((to, from, next) => {
    // 微信授權頁路徑（空白頁）
    if (to.path === "/wx_auth") {
        next();
        return;
    }
    // 校驗微信授權時存儲的微信授權信息
    let wxInfo = sessionStorage.getItem("微信授權信息_key");
    // 沒有用戶信息（即未進行微信授權）
    if (!wxInfo) {
        // 存儲默認打開時訪問的頁面路徑
        sessionStorage.setItem("wxRedirectUrl", to.path);
        // 處理URL地址欄所攜帶的參數
        let search = window.location.search;
        if (search.includes("params_key") && search.includes("&")) {
            search = search.split("&")[0];
        }
        // 微信授權獲取用戶信息指定的路徑
        let redirect_uri = encodeURIComponent(`微信服務器域名/wx_auth${search}`);
        // 隨機參數（可不傳）
        let randomParams = '&state=123';
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo${randomParams}#wechat_redirect`;
        return;
    }
});

WeChatAuth.vue微信授權頁

created() {
    let code = this.getQueryString("code");
    if (code) {
        this.getToken(code);
    } else {
        this.$router.replace("/");
    }
},
methods: {
    // 獲取地址欄參數
    getQueryString(n) {
        let r,
            reg = new RegExp("(^|&)" + n + "=([^&]*)(&|$)");
        r = window.location.search.substr(1).match(reg);
        return r ? decodeURI(r[2]) : null;
    },
    // 獲取token
    getToken(code) {
        this.$axios
            .get("wxauth_api", { params: { code } })
            .then(res => {
                if (res.data.code == 1) {
                    let data = res.data.result_data;
                    // 校驗獲取到的用戶信息是否為空（code只能用一次）
                    if (!flag) {
                        // 存儲微信授權用戶信息
                        sessionStorage.setItem("wxInfo", JSON.stringify(data));
                        // 獲取初次訪問的URL地址
                        let redirectUrl = sessionStorage.getItem("wxRedirectUrl");
                        // 重新打開指定頁面
                        this.$router.replace(redirectUrl);
                    } else {
                        if (sessionStorage.getItem("wxInfo")) {
                            let redirectUrl = sessionStorage.getItem("wxRedirectUrl");
                            this.$router.replace(redirectUrl);
                        }
                    }
                } else {
                    console.log("用戶授權失敗：", res.data.message);
                }
            })
            .catch(err => { });
    }
}

注：微信授權時有code，就進行微信授權操作，獲取用戶信息校驗通過之后跳轉指定路徑。有code值但獲取用戶校驗信息失敗可能是由於刷新所造成的，此時也跳轉到固定的訪問頁面。主要是防止回退時，頁面停留在微信授權頁沒有反應，這樣不利用提升用戶體驗，還容易給用戶操作和體驗效果帶來一定的負面的影響，不利用用戶體驗。