收藏
回答

vue spa单页面应用,在jssdk鉴权ios只有首次鉴权生效,其他页面鉴权无效

回答关注问题邀请回答
收藏

1 个回答

  • 微盟
    微盟
    2021-04-05

    既然IOS仅可使用第一次进入应用的URL来签名,那么在vuex上缓存一个微信签名URL,IOS保存第一次进入应用的URL,Android则缓存为每个页面的URL。签名时,直接从缓存拿出签名URL来处理。

    // 全局判断是否IOS方法
    function isIos(){
      const u = navigator.userAgent;
      return u.indexOf("iPhone") > -1 || u.indexOf("Mac OS") > -1;
    }
    

     定义vuex缓存

    {
      state: {
        wechatSignUrl: ""
      },
      
      mutations: {
        setWechatSignUrl(state, wxSignUrl) {
          // 关键点
          // IOS仅记录第一次进入页面时的URL
          // IOS微信切换路由实际URL不变,只能使用第一进入页面的URL进行签名
          if (isIos() && state.wxSignUrl !== '') {
            return;
          }
          state.wxSignUrl = wxSignUrl;
        }
      },
      
      getters: {
        getWechatSignUrl: (state) => state.wxSignUrl
      }
    }
    

    关键点在于设置更新微信签名URL判断的地方:首次进入应用页面的时候肯定会触发更新,若是IOS且签名URL已经设置过了,那么就不需要更新设置了,只要不退出或刷新应用,缓存永远都会是首次进入页面URL。

    路由守卫内触发更新签名URL

    import store form "@/stores"
     
    // 获取真实有效微信签名URL
    function getWechatSignUrl(to){
        if(isIos()) {
          return window.location.href;
        } else {
          // 此处$appHost需要自行处理
          return $appHost + to.fullPath
        }
    }
     
    ...
    $router.beforeEach((to, from, next) => {
        store.commit("setWechatSignUrl", getWechatSignUrl(to));    
    })
    ...
    

    在路由守卫内更新签名URL,保证IOS是使用当前页面URL,Android是使用目标路由完整地址再加上域名

    使用签名URL调用JSSDK API

    在使用JSSDK API的页面通过vuex取出缓存的微信签名URL,然后进行签名。

    import store form "@/stores"
     
    ...
    {
      methods: {
       initWechatShareConfig() {
         const that = this;
         const wxSignUrl = store.getters['getWechatSignUrl'];
         const wxShareConfigs = {
            // 微信分享配置
         }
     
         // 初始化微信分享
         $wechat.share(wxSignUrl, wxShareConfigs);
       }
      }
    }
    
    2021-04-05
    有用 1
    回复 1
    • 木子水心
      木子水心
      2021-04-08
      亲测,有效感谢!
      2021-04-08
      回复
登录 后发表内容
问题标签