關於企業微信掃碼登陸vue

 

1. 企業微信掃碼登陸官方文檔
2. 采用的是第一種（構造獨立窗口登錄二維碼）
3. 對於前端來說就步驟就是 頁面展示二維碼 => 用戶掃碼登陸點擊確定 => 確定之后重定向自己配置的路徑 => 企業微信會返回一個code => 前端截取code傳給后台換取token ，話不多說上代碼。
4. 在其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: { }, }; </script> <style lang="less" scoped> <!-- 樣式省略 --> </style>


 

我是在mian.js當中，也可在router中

router.beforeEach((to, from, next) => { // 掃碼登錄 // 守衛當中觀察是否重定向頁面沒有，重定向頁面會帶code來進行消費返回token的 if (window.location.href.indexOf('code') >= 0) { // 如果code存在 //如果url中包含code split？分割成數組，取第二個 let code = window.location.href.split('?')[1]; code = code.substring(5, code.indexOf('&')); // 截取字符串第6位開始截取直到&出現截取成功 sessionStorage.setItem('code', code); next(); } else { if (to.path === '/login') { // 如果是登錄頁 localStorage.removeItem('token'); } if (!localStorage.getItem('token') && to.path !== '/login') { // 如果token不存在 並且 不是mylogin頁面 next({ path: '/login' }); } else { next(); } } if (to.meta.title) { // 給每個組件路由命名 document.title = to.meta.title; } });