企业微信登录：

企业微信登录-前端具体实现，下面代码中配置项的字段具体用途说明可以阅读企业微信开发者说明文档。

我们通过提供的企业微信登录组件来进行站内登录，下面是我封装的登录组件以及使用方法

weChatLogin.vue(封装的组件)

<template>
  <div class="wechat">
    <div id="wechat"></div>
  </div>
</template>
<script>
import * as ww from '@wecom/jssdk'
import { loginConfig } from '@/api/login'
export default {
  name: 'weChatLogin',
  data () {
    return {
      wwLogin: null,//记录组件的实例
      config: {
        agentId: null,
        appId: null,
        enable: null// 企业微信登录是否可用
      }
    }
  },
  methods: {
  	//相关配置从后端获取
    async getWecomConfig () {
      await loginConfig().then(response => {
        this.config = response.data
        this.$emit('callback', this.config.enable)
      }).catch(error => {
        if (typeof error === 'object') {
          if (error.message !== '没有访问权限') {
            this.$message.error(error.message)
          }
        }
      })
    },
    创建企业微信登录方法
    createWechatLogin () {
      const that = this
      this.wwLogin = ww.createWWLoginPanel({
        el: '#wechat',
        params: {
          login_type: 'CorpApp',
          appid: this.decrypt(this.config.appId),
          agentid: this.decrypt(this.config.agentId),
          redirect_uri: location.origin,
          redirect_type: 'callback',
          panel_size: 'small'
        },
        onCheckWeComLogin ({ isWeComLogin }) { },
        onLoginSuccess (result) {
          that.$emit('callback', that.config.enable, result.code)
        }
      })
    }
  },
  async mounted () {
    await this.getWecomConfig()
    if (this.config.enable) {//当可以进行企微登录的时候
      this.createWechatLogin()
    }
  },
  beforeDestroy () {//销毁企微实例
    if (this.wwLogin) {
      this.wwLogin.unmount()
    }
  }
}
</script>
<style scoped lang="scss">
.wechat{
  display: inline-flex;
  justify-content: center;
  width: 320px;
  height: 380px;
  background-color: #fff ;
}
.enable-alert{
  display: flex;
  align-items: center;
}
</style>

login.vue(weChatLogin的使用)

<template>
	<WeChatLogin @callback="wechatLogin" />//callback是当获取到后端企微的配置后调用，用来判断企微登录是否可用
</template>
import WeChatLogin from './weChatLogin'
  components: { WeChatLogin },

企微登录的使用很简单，在此就是记录一下使用的经历，有什么问题可以评论或私信联系我。