vue企业微信授权登陆解决方案

router.js 进行路由拦截

// 无openUserId时跳转登录页、勿动
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    // 判断该路由是否需要登录权限
    const hasToken = getToken()
    if (hasToken || sessionStorage.getItem('openUserId') !== null) {
      // 判断本地是否存在openUserId，存在就进入页面，不存在需要走登陆授权
      next()
   } else {
      // 跳转到wxlogin登陆页
      const redirect_uri = encodeURIComponent(
        `http://pj.xxxxx.com.cn${process.env.VUE_APP_CONTEXT_PATH}wxlogin`
      )
      // 路由信息以及拼接的参数（有的页面url会附带参数，需要通过state带过去，注意要转成字符串）
      let routeData = {
        name: to.name,
        query: to.query
      };
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.env.VUE_APP_APPID}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_privateinfo&state=${JSON.stringify(routeData)}#wechat_redirect`
    }
  } else {
    next()
  }
})

在utils下新建一个index.js页面,写一些公共方法

// npm install js-cookie

import Cookies from 'js-cookie'

const TokenKey = 'ZkPlatformToken'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

const getUrlParam = name => {
    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') // 构造一个含有目标参数的正则表达式对象
    const r = window.location.search.substr(1).match(reg) // 匹配目标参数
    if (r != null) return decodeURIComponent(r[2])
    return null // 返回参数值
}

新建一个wxLogin.vue页面

import { getUrlParam } from "@/utils/index";

 mounted() {
    // 跳转过来的参数不是空对象时、把授权的code拿出来、接下来调取我们自己的接口需要用到code
    if (Object.keys(this.$route.query).length !== 0) {
      this.code = this.$route.query.code || getUrlParam("state"); // 前面route.js传入的state、字符串转成对象，后续需要进行跳转
      this.state = JSON.parse(this.$route.query.state) || getUrlParam("state"); // 字符串转成对象
      this.getTokenLogin(this.code);
    }
 }, 
 
 methods: {
    getToken({ code: code, appId: "398635843584" }).then((res) => {
        if (res.data.code === 0) {
        // 接口成功就跳转到用户点的页面
          this.$router.push({
            path: this.state.name,
            query: this.state.query,
          });
        } else {
          // 接口失败的话需要重新走下授权流程
          Toast.fail(res.data.msg);
          if (res.data.code === 500101) {
            const redirect_uri = encodeURIComponent(
              `http://pj.xxxxx.com.cn${process.env.VUE_APP_CONTEXT_PATH}wxlogin`
            );
            // 路由信息以及拼接的参数
            let routeData = {
              name: this.state.name,
              query: this.state.query,
            };
            window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
              process.env.VUE_APP_APPID
              }&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_privateinfo&state=${JSON.stringify(
              routeData
            )}#wechat_redirect`;
          }
         }
      });
 }      

App.vue页面

   // 请求接口获取用户的信息（后端写的接口）
    async getUser() {
      try {
        let res = await getLoginUser();
        var data = res.data.data;
        if (res.data.code === 0) {
        // 将需要的用户数据储存浏览器缓存、如有需要也可以存入vuex、根据自己的需求
          sessionStorage.setItem("openUserId", data.wxOpenUserId);
          sessionStorage.setItem("corpId", data.wxCorpId);
          sessionStorage.setItem("userName", data.userName);
          sessionStorage.setItem("userAvatar", data.avatar);
        } else {
          Toast.fail(res.data.msg);
        }
      } catch (error) {
        console.log(error);
      }
   }