<template>
|
<view class="container">
|
<view class="loading-content" v-if="loading">
|
<image class="loading-icon" src="/static/images/loading.gif"></image>
|
<text class="loading-text">正在企业微信免登中...</text>
|
</view>
|
|
<view class="error-content" v-else-if="error">
|
<image class="error-icon" src="/static/images/error.png"></image>
|
<text class="error-text">{{ errorMessage }}</text>
|
<button class="retry-btn" @click="retryLogin">重新尝试</button>
|
</view>
|
|
<view class="success-content" v-else>
|
<image class="success-icon" src="/static/images/success.png"></image>
|
<text class="success-text">企业微信免登成功</text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { qyWechatAutoLogin } from "@/api/login";
|
|
export default {
|
data() {
|
return {
|
loading: true,
|
error: false,
|
errorMessage: "",
|
// 保存页面参数
|
pageOptions: {},
|
};
|
},
|
|
onLoad(options) {
|
// 保存页面参数
|
this.pageOptions = options || {};
|
// 页面加载时执行免登流程
|
this.qyWechatAutoLogin();
|
},
|
|
methods: {
|
async getLoginCode() {
|
//这里要调用wx.qy.login获取code,是否有集成到uni-app中呢
|
return new Promise((resolve, reject) => {
|
wx.qy.login({
|
success: (res) => {
|
if (res.code) {
|
console.log("企业微信小程序 ---> code：", res.code);
|
resolve(res.code); // 返回 code 给后端
|
} else {
|
reject(new Error("获取 code 失败：" + res.errMsg));
|
}
|
},
|
fail: (err) => {
|
console.error("wx.qy.login 调用失败：", err);
|
// 常见失败原因：非企业微信客户端打开、小程序未关联企业微信等
|
reject(new Error("企业微信登录接口调用失败：" + err.errMsg));
|
},
|
});
|
});
|
},
|
/**
|
* 企业微信免登流程
|
*/
|
async qyWechatAutoLogin() {
|
try {
|
this.loading = true;
|
this.error = false;
|
|
// #ifdef MP-WEIXIN
|
// 在微信小程序环境中，通过企业微信免登
|
console.log("企业微信小程序环境免登");
|
|
// 获取URL参数中的code
|
const code = await this.getLoginCode();
|
|
if (!code) {
|
// 如果没有code，尝试通过企业微信API获取
|
this.handleWxWorkLogin();
|
return;
|
}
|
|
// 调用后端接口进行免登
|
const response = await qyWechatAutoLogin(code);
|
|
if (response.code === 200) {
|
// 免登成功，保存token
|
const token = response.data.token;
|
|
this.$store.commit('SET_TOKEN', token)
|
// 必须调用setToken保存到本地存储
|
const { setToken } = require('@/utils/auth')
|
setToken(token)
|
// 获取用户信息
|
await this.$store.dispatch("GetInfo");
|
|
// 跳转到首页或其他指定页面
|
this.redirectAfterLogin();
|
} else {
|
throw new Error(response.msg || "免登失败");
|
}
|
// #endif
|
|
// #ifdef H5
|
// 检查是否在企业微信环境中
|
if (!this.isWxWorkEnvironment()) {
|
throw new Error("请在企业微信客户端中打开");
|
}
|
|
// 获取URL参数中的code
|
const codeH5 = this.getUrlParam("code");
|
|
if (!codeH5) {
|
// 如果没有code，则跳转到企业微信授权页面
|
this.redirectToWxWorkAuth();
|
return;
|
}
|
|
// 调用后端接口进行免登
|
const responseH5 = await qyWechatAutoLogin(codeH5);
|
|
if (responseH5.code === 200) {
|
// 免登成功，保存token
|
const token = responseH5.data.token;
|
this.$store.commit("SET_TOKEN", token);
|
uni.setStorageSync("token", token);
|
|
// 获取用户信息
|
await this.$store.dispatch("GetInfo");
|
|
// 跳转到首页或其他指定页面
|
this.redirectAfterLogin();
|
} else {
|
throw new Error(responseH5.msg || "免登失败");
|
}
|
// #endif
|
|
// #ifndef MP-WEIXIN || H5
|
throw new Error("该功能仅支持在企业微信中使用");
|
// #endif
|
} catch (err) {
|
console.error("企业微信免登失败:", err);
|
this.loading = false;
|
this.error = true;
|
this.errorMessage = err.message || "免登失败，请稍后重试";
|
}
|
},
|
|
/**
|
* 处理企业微信登录
|
*/
|
handleWxWorkLogin() {
|
// #ifdef MP-WEIXIN
|
// 在企业微信小程序中，可以直接调用企业微信登录API
|
uni.login({
|
provider: "weixin",
|
success: (loginRes) => {
|
console.log("企业微信登录成功", loginRes);
|
// 调用后端接口进行免登
|
qyWechatAutoLogin(loginRes.code)
|
.then((response) => {
|
if (response.code === 200) {
|
// 免登成功，保存token
|
const token = response.data.token;
|
this.$store.commit("SET_TOKEN", token);
|
uni.setStorageSync("token", token);
|
|
// 获取用户信息
|
this.$store.dispatch("GetInfo").then(() => {
|
// 跳转到首页或其他指定页面
|
this.redirectAfterLogin();
|
});
|
} else {
|
throw new Error(response.msg || "免登失败");
|
}
|
})
|
.catch((error) => {
|
console.error("免登失败:", error);
|
this.loading = false;
|
this.error = true;
|
this.errorMessage = error.message || "免登失败，请稍后重试";
|
});
|
},
|
fail: (err) => {
|
console.error("企业微信登录失败:", err);
|
this.loading = false;
|
this.error = true;
|
this.errorMessage = "企业微信登录失败，请稍后重试";
|
},
|
});
|
// #endif
|
},
|
|
/**
|
* 检查是否在企业微信环境
|
*/
|
isWxWorkEnvironment() {
|
const userAgent = navigator.userAgent.toLowerCase();
|
return userAgent.includes("wxwork");
|
},
|
|
/**
|
* 获取URL参数
|
*/
|
getUrlParam(name) {
|
// #ifdef H5
|
const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
const r = window.location.search.substr(1).match(reg);
|
if (r != null) return decodeURIComponent(r[2]);
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
// 在小程序中可以通过其他方式获取参数
|
// 这里简化处理，实际项目中可以根据需要调整
|
// #endif
|
|
return null;
|
},
|
|
/**
|
* 跳转到企业微信授权页面
|
*/
|
redirectToWxWorkAuth() {
|
// 从全局配置中获取企业微信配置
|
const config = getApp().globalData.config;
|
const corpId = config.qyWechatCorpId || "your_corp_id"; // 企业ID
|
const agentId = config.qyWechatAgentId || "your_agent_id"; // 应用ID
|
const redirectUri = encodeURIComponent(window.location.href);
|
const state = Date.now(); // 防重放攻击
|
|
const authUrl = `https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=${corpId}&agentid=${agentId}&redirect_uri=${redirectUri}&state=${state}`;
|
|
window.location.href = authUrl;
|
},
|
|
/**
|
* 登录成功后的跳转处理
|
*/
|
redirectAfterLogin() {
|
// 检查是否有redirect参数指定跳转页面
|
if (this.pageOptions.redirect) {
|
// 解码redirect参数
|
const redirectUrl = decodeURIComponent(this.pageOptions.redirect);
|
this.$tab.reLaunch(redirectUrl);
|
} else {
|
// 默认跳转到首页
|
this.$tab.reLaunch("/pages/index");
|
}
|
},
|
|
/**
|
* 重新尝试登录
|
*/
|
retryLogin() {
|
this.qyWechatAutoLogin();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
min-height: 100vh;
|
padding: 40rpx;
|
background-color: #f8f8f8;
|
}
|
|
.loading-content,
|
.error-content,
|
.success-content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
text-align: center;
|
}
|
|
.loading-icon,
|
.error-icon,
|
.success-icon {
|
width: 120rpx;
|
height: 120rpx;
|
margin-bottom: 30rpx;
|
}
|
|
.loading-text,
|
.error-text,
|
.success-text {
|
font-size: 32rpx;
|
color: #333;
|
margin-bottom: 40rpx;
|
}
|
|
.error-text,
|
.success-text {
|
font-weight: bold;
|
}
|
|
.error-text {
|
color: #ff0000;
|
}
|
|
.success-text {
|
color: #00cc00;
|
}
|
|
.retry-btn {
|
width: 80%;
|
height: 80rpx;
|
background-color: #007aff;
|
color: #fff;
|
border-radius: 10rpx;
|
font-size: 32rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
