简短回顾一下网页端的流程，总的来说网页端的职责有三：
生成一个随机字符作为鉴权会话的临时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，若要使用扫码来跳转指定页面，小程序需要先发布
文章插图
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管理后台使用教程