vueバージョン微信公衆番号/サービス番号授権処理方法記録

このプロジェクトは1つのページで、VIP会員を処理するために使用されていますが、スズメは小さくて五臓がそろっていますが、このキャッシュを許可すべきで、非同期で処理すべきではありません.
まず,なぜ授権されたのかを明らかにし,ユーザ情報を取得するためにユーザに手動で登録させず,ユーザのマイクロ信号に対応するデータを直接根拠とする.
OK、なぜ授権されたのかを明らかにしてから、次の操作を開始します.
2つのページ、1つは公衆番号でVIPを処理するページで、1つは許可使用ページです(いいえ、他の方法で、ここで使用する専門許可ページauth.vue)
グローバルフロントガードを書きます.下にはカスタマイズの方法があります.自分で見ることができます.【utils/storageカスタマイズパッケージ】【動的title】

import router from './index'
import {
      getItem, setItem, removeItem } from '@/utils/storage'
import {
      changeTitle } from '@/commons/func' //    title
router.beforeEach((to, from, next) => {
     
    // setItem("openid",1) //  
    let openid = getItem('openid');
    if(openid){
      // openid
        // if(to.meta.title){
     
        //     changeTitle(to.meta.title)
        // }
        next()
    }else{
      // openid
        if(to.path === '/auth'){
      //        ，   
            next();
        }else{
      //            
            //setItem('now_url',to.fullPath) //         ，       ，      ，             
            next('/auth');
        }
    }
})
router.afterEach((to,from)=>{
     
})

<template>
    <div class="auth">   ...div>
template>

<script>
// const url = localStorage.getItem("now_url"); //                ,      ，                     

export default {
      
    //      
    created() {
      
        document.title = '   ';
        const code = this.GetUrlParame("code"); //   code，     code
        let appid = this.$store.state.appid; //         
        let appsecret = this.$store.state.appsecret; //        

        if (!code) {
      
            //  code
            let authPageBaseUri =
                "https://open.weixin.qq.com/connect/oauth2/authorize";
			//    redirect_uri         ，    encodeURIComponent      ，         
            let authParams = "";
            authParams = `?appid=${
        appid}&redirect_uri=${
        encodeURIComponent(
                window.location.href.split("#")[0] + "#" + this.$route.fullPath
            )}&response_type=code&scope=snsapi_base&state=ceshi#wechat_redirect`;
            window.location.href = authPageBaseUri + authParams;
            
        } else {
      
            // code   code       token openid 
            let params = {
      };
            params.code = code;
            params.appid = appid;
            params.appsecret = appsecret;
            this.$axios
                .post(this.$api.findwxuser, params) //   code，                code     
                .then(res => {
      
                    if (res.data.code_status == 0) {
      
                        this.$storage.setItem("openid", res.data.data.openid);
                        this.$router.replace('/index'); //    replace                 
                    }
                });
        }
    },
    data() {
      
        return {
      };
    },
    methods: {
      
        //   code
        GetUrlParame(parameName) {
      
            ///            
            //   url          
            var parames = window.location.search;
            //         
            if (parames.indexOf(parameName) > -1) {
      
                var parameValue = "";
                parameValue = parames.substring(
                    parames.indexOf(parameName),
                    parames.length
                );
                //           
                if (parameValue.indexOf("&") > -1) {
      
                    //          ,      parameName=parameValue     
                    parameValue = parameValue.substring(
                        0,
                        parameValue.indexOf("&")
                    );
                    //      ,          
                    parameValue = parameValue.replace(parameName + "=", "");
                    return parameValue;
                }
                return "";
            }
        }
    }
};
script>

<style lang="less" scoped>
.auth {
      
    text-align: center;
    font-size: 64px;
    padding-top: 120px;
}
style>