企业微信登录-前端实现

企业微信登录：

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

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

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.datathis.$emit('callback', this.config.enable)}).catch(error => {if (typeof error === 'object') {if (error.message !== '没有访问权限') {this.$message.error(error.message)}}})},创建企业微信登录方法createWechatLogin () {const that = thisthis.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 },

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！