hookehuyr

feat(微信授权): 添加微信授权模块及相关API

新增微信授权模块,包括授权页面、授权信息获取API及微信配置初始化逻辑。修改路由守卫以检查微信授权状态,未授权时跳转至授权页面。优化axios配置及Vant Toast样式导入路径。
<!--
* @Date: 2025-03-20 19:53:12
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-25 10:56:11
* @LastEditTime: 2025-03-25 14:31:15
* @FilePath: /mlaj/src/App.vue
* @Description: 入口文件
-->
......@@ -24,6 +24,29 @@ import 'vant/es/toast/style'
provideAuth(); // 提供全局认证状态
provideCart('single'); // 提供全局购物车状态,单一商品模式
// 初始化微信配置
const initWxConfig = async () => {
const raw_url = encodeURIComponent(location.pathname + location.hash);
try {
const wxJs = await wxJsAPI({ url: raw_url })
wxJs.data.jsApiList = apiList
wx.config(wxJs.data)
wx.ready(() => {
wx.showAllNonBaseMenuItem()
})
wx.error((err) => {
console.warn('微信配置初始化失败:', err)
})
} catch (error) {
console.error('初始化微信配置失败:', error)
}
}
// 在非开发环境下初始化微信配置
if (!import.meta.env.DEV && wxInfo().isWeiXin) {
initWxConfig()
}
</script>
<template>
......
import { fn, fetch } from '@/api/fn';
const Api = {
AUTH_INFO: '/srv/?a=openid_has',
}
/**
* @description: 获取用户授权信息
* @param {*}
* @returns
*/
export const getAuthInfoAPI = () => fn(fetch.get(Api.AUTH_INFO));
/*
* @Date: 2022-05-18 22:56:08
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-21 18:05:34
* @LastEditTime: 2025-03-25 14:59:50
* @FilePath: /mlaj/src/api/fn.js
* @Description: 文件描述
*/
import axios from '@/utils/axios';
import qs from 'Qs'
import { showSuccessToast, showFailToast } from 'vant';
import 'vant/lib/toast/style'
import { showFailToast } from 'vant';
import 'vant/es/toast/style'
/**
* 网络请求功能函数
......
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-25 09:55:59
* @LastEditTime: 2025-03-25 15:17:18
* @FilePath: /mlaj/src/router/index.js
* @Description: 文件描述
*/
import { createRouter, createWebHashHistory } from 'vue-router'
import checkinRoutes from './checkin'
import { getAuthInfoAPI } from '@/api/auth'
import { wxInfo } from "@/utils/tools";
const routes = [
{
......@@ -180,6 +182,12 @@ const routes = [
name: 'upload_video',
component: () => import('../views/upload_video.vue'),
meta: { title: 'upload_video' },
}, {
path: '/auth',
component: () => import('@/views/auth.vue'),
meta: {
title: '微信授权页面',
}
},
...checkinRoutes,
]
......@@ -210,7 +218,20 @@ const authRequiredRoutes = [
]
// 导航守卫
router.beforeEach((to, from, next) => {
router.beforeEach(async (to, from, next) => {
// 微信授权检查
if (!import.meta.env.DEV && wxInfo().isWeiXin && to.path !== '/auth') {
try {
const { code, data } = await getAuthInfoAPI();
if (code && !data.openid_has) {
next({ path: '/auth', query: { href: location.hash } })
return
}
} catch (error) {
console.error('微信授权检查失败:', error)
}
}
const currentUser = JSON.parse(localStorage.getItem('currentUser'))
// 检查当前路由是否需要认证
......
......@@ -2,19 +2,18 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-28 10:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-25 09:46:46
* @FilePath: /temple_material_request/src/utils/axios.js
* @LastEditTime: 2025-03-25 15:03:55
* @FilePath: /mlaj/src/utils/axios.js
* @Description:
*/
import axios from 'axios';
import router from '@/router';
import qs from 'Qs'
import { strExist } from '@/utils/tools'
// import { parseQueryString } from '@/utils/tools'
// import router from '@/router';
// import qs from 'Qs'
// import { strExist } from '@/utils/tools'
axios.defaults.baseURL = 'http://localhost:3000/api';
// axios.defaults.baseURL = 'http://localhost:3000/api';
axios.defaults.params = {
f: 'good',
f: 'behalo',
};
/**
......
<!--
* @Date: 2022-08-29 13:55:31
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-25 15:10:43
* @FilePath: /mlaj/src/views/auth.vue
* @Description: 授权模块
-->
<template>
<div />
</template>
<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
const $route = useRoute();
onMounted(() => {
// php需要先跳转链接获取openid
/**
* encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
* 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。
* 其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。
*/
let raw_url = encodeURIComponent(location.origin + location.pathname + $route.query.href); // 未授权的地址
// TAG: 开发环境测试数据
const short_url = `/srv/?f=behalo&a=openid&res=${raw_url}`;
location.href = import.meta.env.DEV
? `${short_url}&test_openid=${import.meta.env.VITE_OPENID}`
: `${short_url}`;
})
</script>