关于企业微信扫码登陆vue

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

 

 

关于企业微信扫码登陆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>企业扫码登录" title="微信扫码登录">微信扫码登录</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;
    }
});

以上是 关于企业微信扫码登陆vue 的全部内容， 来源链接： utcz.com/z/378883.html

回到顶部