feat(微信授权): 添加微信授权模块及相关API
新增微信授权模块,包括授权页面、授权信息获取API及微信配置初始化逻辑。修改路由守卫以检查微信授权状态,未授权时跳转至授权页面。优化axios配置及Vant Toast样式导入路径。
Showing
6 changed files
with
101 additions
and
14 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-03-20 19:53:12 | 2 | * @Date: 2025-03-20 19:53:12 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-03-25 10:56:11 | 4 | + * @LastEditTime: 2025-03-25 14:31:15 |
| 5 | * @FilePath: /mlaj/src/App.vue | 5 | * @FilePath: /mlaj/src/App.vue |
| 6 | * @Description: 入口文件 | 6 | * @Description: 入口文件 |
| 7 | --> | 7 | --> |
| ... | @@ -24,6 +24,29 @@ import 'vant/es/toast/style' | ... | @@ -24,6 +24,29 @@ import 'vant/es/toast/style' |
| 24 | 24 | ||
| 25 | provideAuth(); // 提供全局认证状态 | 25 | provideAuth(); // 提供全局认证状态 |
| 26 | provideCart('single'); // 提供全局购物车状态,单一商品模式 | 26 | provideCart('single'); // 提供全局购物车状态,单一商品模式 |
| 27 | + | ||
| 28 | +// 初始化微信配置 | ||
| 29 | +const initWxConfig = async () => { | ||
| 30 | + const raw_url = encodeURIComponent(location.pathname + location.hash); | ||
| 31 | + try { | ||
| 32 | + const wxJs = await wxJsAPI({ url: raw_url }) | ||
| 33 | + wxJs.data.jsApiList = apiList | ||
| 34 | + wx.config(wxJs.data) | ||
| 35 | + wx.ready(() => { | ||
| 36 | + wx.showAllNonBaseMenuItem() | ||
| 37 | + }) | ||
| 38 | + wx.error((err) => { | ||
| 39 | + console.warn('微信配置初始化失败:', err) | ||
| 40 | + }) | ||
| 41 | + } catch (error) { | ||
| 42 | + console.error('初始化微信配置失败:', error) | ||
| 43 | + } | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +// 在非开发环境下初始化微信配置 | ||
| 47 | +if (!import.meta.env.DEV && wxInfo().isWeiXin) { | ||
| 48 | + initWxConfig() | ||
| 49 | +} | ||
| 27 | </script> | 50 | </script> |
| 28 | 51 | ||
| 29 | <template> | 52 | <template> | ... | ... |
src/api/auth.js
0 → 100644
| 1 | /* | 1 | /* |
| 2 | * @Date: 2022-05-18 22:56:08 | 2 | * @Date: 2022-05-18 22:56:08 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-03-21 18:05:34 | 4 | + * @LastEditTime: 2025-03-25 14:59:50 |
| 5 | * @FilePath: /mlaj/src/api/fn.js | 5 | * @FilePath: /mlaj/src/api/fn.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| 8 | import axios from '@/utils/axios'; | 8 | import axios from '@/utils/axios'; |
| 9 | import qs from 'Qs' | 9 | import qs from 'Qs' |
| 10 | -import { showSuccessToast, showFailToast } from 'vant'; | 10 | +import { showFailToast } from 'vant'; |
| 11 | -import 'vant/lib/toast/style' | 11 | +import 'vant/es/toast/style' |
| 12 | 12 | ||
| 13 | /** | 13 | /** |
| 14 | * 网络请求功能函数 | 14 | * 网络请求功能函数 | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2025-03-20 20:36:36 | 2 | * @Date: 2025-03-20 20:36:36 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-03-25 09:55:59 | 4 | + * @LastEditTime: 2025-03-25 15:17:18 |
| 5 | * @FilePath: /mlaj/src/router/index.js | 5 | * @FilePath: /mlaj/src/router/index.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| 8 | import { createRouter, createWebHashHistory } from 'vue-router' | 8 | import { createRouter, createWebHashHistory } from 'vue-router' |
| 9 | import checkinRoutes from './checkin' | 9 | import checkinRoutes from './checkin' |
| 10 | +import { getAuthInfoAPI } from '@/api/auth' | ||
| 11 | +import { wxInfo } from "@/utils/tools"; | ||
| 10 | 12 | ||
| 11 | const routes = [ | 13 | const routes = [ |
| 12 | { | 14 | { |
| ... | @@ -180,6 +182,12 @@ const routes = [ | ... | @@ -180,6 +182,12 @@ const routes = [ |
| 180 | name: 'upload_video', | 182 | name: 'upload_video', |
| 181 | component: () => import('../views/upload_video.vue'), | 183 | component: () => import('../views/upload_video.vue'), |
| 182 | meta: { title: 'upload_video' }, | 184 | meta: { title: 'upload_video' }, |
| 185 | + }, { | ||
| 186 | + path: '/auth', | ||
| 187 | + component: () => import('@/views/auth.vue'), | ||
| 188 | + meta: { | ||
| 189 | + title: '微信授权页面', | ||
| 190 | + } | ||
| 183 | }, | 191 | }, |
| 184 | ...checkinRoutes, | 192 | ...checkinRoutes, |
| 185 | ] | 193 | ] |
| ... | @@ -210,7 +218,20 @@ const authRequiredRoutes = [ | ... | @@ -210,7 +218,20 @@ const authRequiredRoutes = [ |
| 210 | ] | 218 | ] |
| 211 | 219 | ||
| 212 | // 导航守卫 | 220 | // 导航守卫 |
| 213 | -router.beforeEach((to, from, next) => { | 221 | +router.beforeEach(async (to, from, next) => { |
| 222 | + // 微信授权检查 | ||
| 223 | + if (!import.meta.env.DEV && wxInfo().isWeiXin && to.path !== '/auth') { | ||
| 224 | + try { | ||
| 225 | + const { code, data } = await getAuthInfoAPI(); | ||
| 226 | + if (code && !data.openid_has) { | ||
| 227 | + next({ path: '/auth', query: { href: location.hash } }) | ||
| 228 | + return | ||
| 229 | + } | ||
| 230 | + } catch (error) { | ||
| 231 | + console.error('微信授权检查失败:', error) | ||
| 232 | + } | ||
| 233 | + } | ||
| 234 | + | ||
| 214 | const currentUser = JSON.parse(localStorage.getItem('currentUser')) | 235 | const currentUser = JSON.parse(localStorage.getItem('currentUser')) |
| 215 | 236 | ||
| 216 | // 检查当前路由是否需要认证 | 237 | // 检查当前路由是否需要认证 | ... | ... |
| ... | @@ -2,19 +2,18 @@ | ... | @@ -2,19 +2,18 @@ |
| 2 | * @Author: hookehuyr hookehuyr@gmail.com | 2 | * @Author: hookehuyr hookehuyr@gmail.com |
| 3 | * @Date: 2022-05-28 10:17:40 | 3 | * @Date: 2022-05-28 10:17:40 |
| 4 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 4 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 5 | - * @LastEditTime: 2024-07-25 09:46:46 | 5 | + * @LastEditTime: 2025-03-25 15:03:55 |
| 6 | - * @FilePath: /temple_material_request/src/utils/axios.js | 6 | + * @FilePath: /mlaj/src/utils/axios.js |
| 7 | * @Description: | 7 | * @Description: |
| 8 | */ | 8 | */ |
| 9 | import axios from 'axios'; | 9 | import axios from 'axios'; |
| 10 | -import router from '@/router'; | 10 | +// import router from '@/router'; |
| 11 | -import qs from 'Qs' | 11 | +// import qs from 'Qs' |
| 12 | -import { strExist } from '@/utils/tools' | 12 | +// import { strExist } from '@/utils/tools' |
| 13 | -// import { parseQueryString } from '@/utils/tools' | ||
| 14 | 13 | ||
| 15 | -axios.defaults.baseURL = 'http://localhost:3000/api'; | 14 | +// axios.defaults.baseURL = 'http://localhost:3000/api'; |
| 16 | axios.defaults.params = { | 15 | axios.defaults.params = { |
| 17 | - f: 'good', | 16 | + f: 'behalo', |
| 18 | }; | 17 | }; |
| 19 | 18 | ||
| 20 | /** | 19 | /** | ... | ... |
src/views/auth.vue
0 → 100644
| 1 | +<!-- | ||
| 2 | + * @Date: 2022-08-29 13:55:31 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2025-03-25 15:10:43 | ||
| 5 | + * @FilePath: /mlaj/src/views/auth.vue | ||
| 6 | + * @Description: 授权模块 | ||
| 7 | +--> | ||
| 8 | +<template> | ||
| 9 | + <div /> | ||
| 10 | +</template> | ||
| 11 | + | ||
| 12 | +<script setup> | ||
| 13 | +import { onMounted } from 'vue' | ||
| 14 | +import { useRoute } from 'vue-router' | ||
| 15 | + | ||
| 16 | +const $route = useRoute(); | ||
| 17 | + | ||
| 18 | +onMounted(() => { | ||
| 19 | + // php需要先跳转链接获取openid | ||
| 20 | + /** | ||
| 21 | + * encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 | ||
| 22 | + * 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。 | ||
| 23 | + * 其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。 | ||
| 24 | + */ | ||
| 25 | + let raw_url = encodeURIComponent(location.origin + location.pathname + $route.query.href); // 未授权的地址 | ||
| 26 | + // TAG: 开发环境测试数据 | ||
| 27 | + const short_url = `/srv/?f=behalo&a=openid&res=${raw_url}`; | ||
| 28 | + location.href = import.meta.env.DEV | ||
| 29 | + ? `${short_url}&test_openid=${import.meta.env.VITE_OPENID}` | ||
| 30 | + : `${short_url}`; | ||
| 31 | +}) | ||
| 32 | +</script> |
-
Please register or login to post a comment