在页面开始函数代码中调用这一函数
created: function () {this.start();},
接下来处理轮询结果，如果没有拿到值，说明Token已过期，atus状态为""
await request(`${this.prefix}/MiniProgram/GetToken?token=${this.wechatMiniappLoginToken}`,"get",null).then(async (re) => {if (re.data.result == null) {this.wechatMiniappLoginStatus = "EXPIRED";this.wechatMiniappLoginToken = null;this.loading = false;}
注意：
在后端项目的e.cs中，我们定义的
为5分钟，表明二维码的有效时间为5分钟 。
public static TimeSpan TokenCacheDuration = TimeSpan.FromMinutes(5);
相应的Token为时，将ken置空，这一属性变动vue会通知img的src值变动而刷新小程序码，同时获取新的Token值赋值给ken，这也是刷新小程序码的逻辑
this.wechatMiniappLoginToken = null;
这样能以简单方式，实现二维码刷新功能 。
界面中新建一个刷新小程序码的按钮：
刷新
编写一个方法，在用于获取Code后，调用后端第三方登录接口，获取访问凭证存储于中
async externalLogin(userInfo: {authProvider: string;providerKey: string;providerAccessCode: string;}) {let authProvider = userInfo.authProvider;let providerKey = userInfo.providerKey;let providerAccessCode = userInfo.providerAccessCode;await request(`https://localhost:44311/api/TokenAuth/ExternalAuthenticate`,"post",{authProvider,providerKey,providerAccessCode,}).then(async (res) => {var data = http://www.kingceram.com/post/res.data.result;setToken(data.accessToken);});},
定义函数，使用js-库将访问凭证写入浏览器中
const tokenKey = "main_token";const setToken = (token: string) => Cookies.set(tokenKey, token);

文章插图
在此之前我们需写一个参数传递对象，为了保留一定的扩展能力，data中我们定义，已经实现的微信小程序登录，则对应的值为“”，则为生成的Token值
loginExternalForms: {WeChat: {authProvider: "WeChatAuthProvider",providerKey: "default",providerAccessCode: "",},},
接下来包装方法，在调用完成前后做一些操作，比如登录成功后，将调方法
为了保留一定的扩展能力，函数中我们保留参数，已实现的微信小程序登录函数调用时传递参数""
【三使用 Abp.Zero 搭建第三方登录模块：网页端开发】async handleExternalLogin(authProvider) {// (this.$refs.baseForm as any).validate(async (valid) => {//if (valid == null) {var currentForms = this.loginExternalForms[authProvider];this.loading = true;return await this.ExternalLogin(currentForms).then(async (re) => {return await request(`${this.prefix}/User/GetCurrentUser`,"get",null).then(async (re) => {var result = re.data.result as any;return await this.afterLoginSuccess(result);});});},async handleWxLogin(providerAccessCode) {this.loginExternalForms.WeChat.providerAccessCode = providerAccessCode;return await this.handleExternalLogin("WeChat");},
函数用于登录成功后的逻辑，停止计时器，并跳转页面，本实例仅做弹窗提示
successMessage(value = "http://www.kingceram.com/post/执行成功") {this.$notify({title: "成功",message: value,type: "success",});},async afterLoginSuccess(userinfo) {clearInterval(this.timerId);this.successMessage("登录成功");this.userInfo = userinfo;},

• 上一页
• 1
• 2
• 3
• 下一页

• JS之数组遍历forEach
• ddr5内存频率
• vue中如何简单使用vue.draggable组件实现拖拽功能
• iqoo11屏幕是三星的吗
• 前端框架三巨头年度走势对比：Vue 增长率最高
• 三 用Abp实现短信验证码免密登录：Vue网页端开发
• 使用Yeoman实现vue项目结构创建
• 使用：hover和onmouseover的响应事件
• 前端框架三巨头：React仍是老大，Vue 增长率最高
• vue-antd-admin管理后台使用教程