關於企業微信掃碼登陸vue
- 企業微信掃碼登陸官方文檔
- 採用的是第一種（構造獨立窗口登錄二維碼）
- 對於前端來說就步驟就是 頁面展示二維碼 => 用戶掃碼登陸點擊確定 => 確定之後重定向自己配置的路徑 => 企業微信會返回一個code => 前端截取code傳給後臺換取token ，話不多說上代碼。
- 在其login頁面
<template>
<div class="login">
<section class="code-login">
<div class="login-way">
<div>
<span class="weixin"></span>
<span>企業微信掃碼登錄</span>
</div>
</div>
<iframe :src="wechatUrl" frameborder="0" scrolling="no" width="100%" height="100%"
id="wx_reg">
<p>您的瀏覽器不支持 iframe 標籤。</p>
</iframe>
</section>
</div>
</template>
<script>
import { loginTf } from '../../api/login'; // 換取token接口
export default {
data() {
return {
wechatUrl: 'https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=你的id&agentid=1000002&redirect_uri=http%3A%2F%2F127.0.0.1%3A8080%2Flogin&state=23423ess'
// 我是重定向頁面配置login頁面，因爲跳轉時候會有空白用戶體驗度不好，還有就是全局路由前置守衛導航前端控制沒有token的時候跳轉login頁面
};
},
created() {
// 獲取code，請求後臺，後臺進行消費返回token ，code我是在前置守衛中儲存的
let code = sessionStorage.getItem('code');
if (code) {
// 封裝的請求接口
loginTf({ 'code': code, 'state': '後臺需要傳的值'}).then(res => {
if (res.b === 1) { // 獲取成功渲染數據 a代表數組 o代表單個數據
let token = res.o; // 請求成功跳轉首頁
localStorage.setItem('token', token);
this.$router.replace('/index')
} else {
this.$router.push('/login');
if (res.data.ec[0]) {
errorMsg = res.data.ec[0];
} else {
errorMsg = '未知錯誤';
}
this.$message({ message: errorMsg, type: 'error', center: true });
}
}).catch(msg => {
this.$message({ message: '系統異常', type: 'error', center: true });
});
}
},
methods: {
},