简短回顾一下网页端的流程,总的来说网页端的职责有三:
生成一个随机字符作为鉴权会话的临时Token,生成一个小程序码,Token作为参数固化于小程序码当中监控整个鉴权过程状态,一旦状态变为(已授权)则获取小程序登录凭证code 。调用完成登录 。
上一章,我们介绍了服务端的开发,这次我们需要调用,,分别获取小程序码,和获取当前状态
首先使用vue-cli创建一个web项目,命名为mp-auth
vue create mp-auth
新建.ts,创建对象,这一对象将利用axios库发送带有访问凭证的的请求
这里使用js-库获取中的访问凭证,并添加到中
import Cookies from "js-cookie";import axios, {CancelTokenSource } from 'axios'//发送网络请求const tokenKey = "main_token";const getToken = () => Cookies.get(tokenKey);export const request = async (url: string, methods, data: any, onProgress?: (e) => void, cancelToken?: CancelTokenSource) => {let token = nulllet timeout = 3000;if (cancelToken) {token = cancelToken.tokentimeout = 0;}const service = axios.create()service.interceptors.request.use((config) => {const token = getToken();// Add X-Access-Token header to every request, you can add other custom headers hereif (token) {config.headers['X-XSRF-TOKEN'] = tokenconfig.headers['Authorization'] = 'Bearer ' + token}return config},(error) => {Promise.reject(error)})const re = await service.request({url: url,method: methods,data: data,cancelToken: token,timeout: timeout,onUploadProgress: function (progressEvent) { //原生获取上传进度的事件if (progressEvent.lengthComputable) {if (onProgress) {onProgress(progressEvent);}}},})return re as any;}///获得取消令牌export const getCancelToken = () => {const source = axios.CancelToken.source();return source;}
回到App.vue
我们按照网页端这个三个职责的顺序,分步骤完成代码
生成Token
首先建立两个变量,存储当前的Token和状态枚举值
export default {name: "App",data: () => {return {wechatMiniappLoginToken: null,wechatMiniappLoginStatus: "WAIT",};},
中建立函数,这里使用8位随机数作为token值
methods: {getToken() {if (this.wechatMiniappLoginToken == null) {var date = new Date();var token = `${(Math.random() * 100000000).toFixed(0).toString().padEnd(8, "0")}`;this.wechatMiniappLoginToken = token;}return this.wechatMiniappLoginToken;}}
生成小程序码
Html部分,插入一个图片,将token传入scene参数
文章插图
是你的服务地址前缀
prefix: "https://localhost:44311/api/services/app"
page为小程序中鉴权页面的路径,需注意的是在小程序未发布时无法跳转至页面,报错41030,若要使用扫码来跳转指定页面,小程序需要先发布
![三 使用 Abp.Zero 搭建第三方登录模块:网页端开发](http://img.gansulong.com/230915/1323521133-1.jpg)
文章插图
miniappPage: "pages/login/index"
监控整个鉴权过程状态
首先需要一个函数,根据当前的Token获取当前鉴权状态,并且不断循环这一操作,这里编写start函数,并以每1秒钟轮询状态,代码如下:
start() {clearInterval(this.timerId);this.timerId = setInterval(async () => {if (!this.loading) {this.loading = true;await request(`${this.prefix}/MiniProgram/GetToken?token=${this.wechatMiniappLoginToken}`,"get",null)}}, 1000);},
- JS之数组遍历forEach
- ddr5内存频率
- vue中如何简单使用vue.draggable组件实现拖拽功能
- iqoo11屏幕是三星的吗
- 前端框架三巨头年度走势对比:Vue 增长率最高
- 三 用Abp实现短信验证码免密登录:Vue网页端开发
- 使用Yeoman实现vue项目结构创建
- 使用:hover和onmouseover的响应事件
- 前端框架三巨头:React仍是老大,Vue 增长率最高
- vue-antd-admin管理后台使用教程