kk
463 lines
15 KiB
Vue
463 lines
15 KiB
Vue
<template>
|
||
<view class="loading-page">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">{{ statusText }}</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config/env.js';
|
||
import { gatewayGet, gatewayPost } from '@/utils/request.js';
|
||
import { detectPlatform, getAppNo } from '@/utils/env.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusText: '正在登录...',
|
||
deviceId: '',
|
||
action: '',
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.deviceId = options.device_id || '';
|
||
this.action = options.action || '';
|
||
|
||
// #ifdef H5
|
||
// Mock 模式：跳过微信 OAuth，直接登录
|
||
if (config.mockWechatLogin && this.action !== 'userinfo') {
|
||
this.mockLogin();
|
||
return;
|
||
}
|
||
|
||
// 从 URL 参数获取 code（App.vue 跳转时带过来）
|
||
let code = options.code || '';
|
||
if (!code) {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
code = urlParams.get('code') || '';
|
||
}
|
||
|
||
// 兜底：从 localStorage 恢复（页面复用时 onLoad 不触发，localStorage 由跳转函数清理）
|
||
if (!this.action) {
|
||
this.action = localStorage.getItem('__auth_action') || '';
|
||
}
|
||
if (!this.deviceId) {
|
||
this.deviceId = localStorage.getItem('__auth_device_id') || '';
|
||
}
|
||
console.log('[loading] onLoad - action:', this.action, 'deviceId:', this.deviceId, 'code:', code ? 'yes' : 'no');
|
||
|
||
if (this.action === 'userinfo') {
|
||
// 获取用户信息流程
|
||
if (code) {
|
||
this.handleUserInfoCallback(code);
|
||
} else {
|
||
this.startUserInfoAuth();
|
||
}
|
||
} else {
|
||
// 登录流程
|
||
if (code) {
|
||
this.handleCallback(code);
|
||
} else {
|
||
this.startAuth();
|
||
}
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
// 小程序环境暂不支持，跳回扫码页
|
||
uni.redirectTo({ url: '/pages/index/scan' });
|
||
// #endif
|
||
},
|
||
methods: {
|
||
/**
|
||
* 发起 OAuth 授权（静默授权，只获取 openid）
|
||
*/
|
||
async startAuth() {
|
||
const platform = detectPlatform();
|
||
const appNo = getAppNo(platform);
|
||
|
||
if (!appNo) {
|
||
// 非微信环境，跳转注册页（手机号注册）
|
||
this.goToRegister();
|
||
return;
|
||
}
|
||
|
||
try {
|
||
this.statusText = '正在获取授权...';
|
||
|
||
// 存入 localStorage（页面复用时 onLoad 不会重新触发，需要从 localStorage 读取）
|
||
if (this.deviceId) {
|
||
localStorage.setItem('__auth_device_id', this.deviceId);
|
||
}
|
||
|
||
// 回调地址：必须与微信公众号后台注册地址一致，不能带自定义参数
|
||
const redirectUri = config.authRedirectUri || (
|
||
window.location.origin.replace(/^http:/, 'https:') + window.location.pathname
|
||
);
|
||
|
||
// 使用 snsapi_base 静默授权，不弹窗
|
||
const res = await gatewayGet('/api/v1/user/auth/url', {
|
||
app_no: appNo,
|
||
scopes: 'snsapi_base',
|
||
redirect_uri: redirectUri,
|
||
});
|
||
|
||
const data = res.data || {};
|
||
if (data.code === 0 && data.data && data.data.auth_url) {
|
||
// 通过 state 传递 device_id（OAuth 标准保证 state 原样回传）
|
||
let authUrl = data.data.auth_url;
|
||
if (this.deviceId) {
|
||
const stateVal = encodeURIComponent(JSON.stringify({ device_id: this.deviceId }));
|
||
try {
|
||
const urlObj = new URL(authUrl);
|
||
urlObj.searchParams.set('state', stateVal);
|
||
authUrl = urlObj.toString();
|
||
} catch (_) {
|
||
authUrl += (authUrl.includes('?') ? '&' : '?') + 'state=' + stateVal;
|
||
}
|
||
}
|
||
// 跳转微信授权页（静默，不弹窗）
|
||
window.location.href = authUrl;
|
||
} else {
|
||
uni.showToast({ title: data.message || '获取授权失败', icon: 'none' });
|
||
setTimeout(() => this.goToScan(), 1500);
|
||
}
|
||
} catch (e) {
|
||
console.error('[Auth] startAuth error:', e);
|
||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||
setTimeout(() => this.goToScan(), 1500);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 处理授权回调（用 code 换 openid，再用 openid 登录）
|
||
*/
|
||
async handleCallback(code) {
|
||
const appNo = uni.getStorageSync('app_no') || getAppNo(detectPlatform());
|
||
|
||
if (!appNo) {
|
||
uni.showToast({ title: '无法获取应用信息', icon: 'none' });
|
||
this.goToScan();
|
||
return;
|
||
}
|
||
|
||
try {
|
||
this.statusText = '正在验证身份...';
|
||
|
||
// 1. 用 code 换取 openid（snsapi_base 静默授权）
|
||
const callbackRes = await gatewayPost('/api/v1/user/auth/exchange', {
|
||
app_no: appNo,
|
||
code: code,
|
||
});
|
||
|
||
const callbackData = callbackRes.data || {};
|
||
console.log('[loading] auth callback response:', JSON.stringify(callbackData, null, 2));
|
||
|
||
if (callbackData.code !== 0 || !callbackData.data) {
|
||
uni.showToast({ title: callbackData.message || '授权失败', icon: 'none' });
|
||
setTimeout(() => this.goToScan(), 1500);
|
||
return;
|
||
}
|
||
|
||
const openid = callbackData.data.openid;
|
||
if (!openid) {
|
||
uni.showToast({ title: '获取用户标识失败', icon: 'none' });
|
||
setTimeout(() => this.goToScan(), 1500);
|
||
return;
|
||
}
|
||
|
||
// 清除 URL 中的 code 参数，避免刷新重复处理
|
||
const url = new URL(window.location.href);
|
||
url.searchParams.delete('code');
|
||
url.searchParams.delete('state');
|
||
window.history.replaceState({}, '', url.toString());
|
||
|
||
// 存储 openid
|
||
uni.setStorageSync('openid', openid);
|
||
|
||
// 2. 用 openid 调用登录接口
|
||
this.statusText = '正在登录...';
|
||
const loginRes = await gatewayPost('/api/v1/user/login', {
|
||
app_no: appNo,
|
||
openid: openid,
|
||
});
|
||
|
||
const data = loginRes.data || {};
|
||
console.log('[loading] login response:', JSON.stringify(data, null, 2));
|
||
|
||
if (data.code === 0 && data.data) {
|
||
const result = data.data;
|
||
|
||
if (result.register) {
|
||
// 已注册 → 存 token → 进入开门页
|
||
uni.setStorageSync('token', result.token);
|
||
this.goToHome();
|
||
} else {
|
||
// 未注册 → 存 temp_token → 跳注册页
|
||
uni.setStorageSync('temp_token', result.temp_token);
|
||
this.goToRegister();
|
||
}
|
||
} else {
|
||
uni.showToast({ title: data.message || '登录失败', icon: 'none' });
|
||
setTimeout(() => this.goToScan(), 1500);
|
||
}
|
||
} catch (e) {
|
||
console.error('[Auth] login error:', e);
|
||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||
setTimeout(() => this.goToScan(), 1500);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 发起非静默授权获取用户信息（snsapi_userinfo，弹窗确认）
|
||
*/
|
||
async startUserInfoAuth() {
|
||
const platform = detectPlatform();
|
||
const appNo = getAppNo(platform);
|
||
|
||
if (!appNo) {
|
||
// 非微信环境，直接跳回首页
|
||
this.goToHomeWithAction();
|
||
return;
|
||
}
|
||
|
||
try {
|
||
this.statusText = '正在获取用户信息...';
|
||
|
||
// 存入 localStorage（页面复用时 onLoad 不会重新触发，需要从 localStorage 读取）
|
||
localStorage.setItem('__auth_action', 'userinfo');
|
||
if (this.deviceId) {
|
||
localStorage.setItem('__auth_device_id', this.deviceId);
|
||
}
|
||
|
||
// 回调地址：必须与微信公众号后台注册地址一致，不能带自定义参数
|
||
const redirectUri = config.authRedirectUri || (
|
||
window.location.origin.replace(/^http:/, 'https:') + window.location.pathname
|
||
);
|
||
|
||
const res = await gatewayGet('/api/v1/user/auth/url', {
|
||
app_no: appNo,
|
||
scopes: 'snsapi_userinfo',
|
||
redirect_uri: redirectUri,
|
||
});
|
||
|
||
const data = res.data || {};
|
||
if (data.code === 0 && data.data && data.data.auth_url) {
|
||
// 通过 state 传递 action 和 device_id（OAuth 标准保证 state 原样回传）
|
||
const stateObj = { action: 'userinfo' };
|
||
if (this.deviceId) {
|
||
stateObj.device_id = this.deviceId;
|
||
}
|
||
const stateVal = encodeURIComponent(JSON.stringify(stateObj));
|
||
let authUrl = data.data.auth_url;
|
||
try {
|
||
const urlObj = new URL(authUrl);
|
||
urlObj.searchParams.set('state', stateVal);
|
||
authUrl = urlObj.toString();
|
||
} catch (_) {
|
||
authUrl += (authUrl.includes('?') ? '&' : '?') + 'state=' + stateVal;
|
||
}
|
||
// 跳转微信授权页（弹窗确认）
|
||
window.location.href = authUrl;
|
||
} else {
|
||
uni.showToast({ title: data.message || '获取授权失败', icon: 'none' });
|
||
setTimeout(() => this.goToHomeWithAction(), 1500);
|
||
}
|
||
} catch (e) {
|
||
console.error('[Auth] startUserInfoAuth error:', e);
|
||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||
setTimeout(() => this.goToHomeWithAction(), 1500);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 处理用户信息授权回调（用 code 调 /api/v1/user/info 获取头像昵称）
|
||
*/
|
||
async handleUserInfoCallback(code) {
|
||
const appNo = uni.getStorageSync('app_no') || getAppNo(detectPlatform());
|
||
|
||
if (!appNo) {
|
||
this.goToHomeWithAction();
|
||
return;
|
||
}
|
||
|
||
try {
|
||
this.statusText = '正在获取用户信息...';
|
||
|
||
// 清除 URL 中的 code/action 参数，避免刷新重复处理
|
||
const url = new URL(window.location.href);
|
||
url.searchParams.delete('code');
|
||
url.searchParams.delete('state');
|
||
url.searchParams.delete('action');
|
||
window.history.replaceState({}, '', url.toString());
|
||
|
||
// 用 code 调用 POST /api/v1/user/info 获取用户信息（必须用 POST，GET 是另一个端点）
|
||
console.log('[loading] 请求 POST user/info, app_no:', appNo, 'code:', code);
|
||
const res = await gatewayPost('/api/v1/user/info', {
|
||
app_no: appNo,
|
||
code: code,
|
||
});
|
||
|
||
const data = res.data || {};
|
||
console.log('[loading] user/info response:', JSON.stringify(data, null, 2));
|
||
console.log('[loading] user/info statusCode:', res.statusCode);
|
||
|
||
if (data.code === 0 && data.data) {
|
||
const userInfo = data.data;
|
||
// 存入缓存
|
||
uni.setStorageSync('user_info', {
|
||
nickname: userInfo.nickname || '',
|
||
avatar: userInfo.avatar || '',
|
||
phone: userInfo.phone || '',
|
||
});
|
||
} else {
|
||
console.warn('[loading] 获取用户信息失败:', data.message);
|
||
}
|
||
|
||
// 跳回首页（我的 tab）
|
||
this.goToHomeWithAction();
|
||
} catch (e) {
|
||
console.error('[Auth] handleUserInfoCallback error:', e);
|
||
this.goToHomeWithAction();
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 跳回首页并标记为"我的"tab
|
||
*/
|
||
goToHomeWithAction() {
|
||
// 兼容页面复用：优先 this.deviceId，其次 localStorage
|
||
const deviceId = this.deviceId || localStorage.getItem('__auth_device_id') || '';
|
||
const url = deviceId
|
||
? `/pages/index/index?device_id=${deviceId}&action=mine`
|
||
: '/pages/index/index?action=mine';
|
||
localStorage.removeItem('__auth_device_id');
|
||
localStorage.removeItem('__auth_action');
|
||
uni.redirectTo({ url });
|
||
},
|
||
|
||
goToHome() {
|
||
const deviceId = this.deviceId || localStorage.getItem('__auth_device_id') || '';
|
||
const url = deviceId
|
||
? `/pages/index/index?device_id=${deviceId}`
|
||
: '/pages/index/index';
|
||
localStorage.removeItem('__auth_device_id');
|
||
uni.redirectTo({ url });
|
||
},
|
||
|
||
goToRegister() {
|
||
// 记录扫码时的原始 URL，注册完成后跳回
|
||
const scanUrl = this.deviceId
|
||
? `/pages/index/index?device_id=${this.deviceId}`
|
||
: '';
|
||
if (scanUrl) {
|
||
uni.setStorageSync('__scan_redirect_url', scanUrl);
|
||
}
|
||
|
||
const url = this.deviceId
|
||
? `/pages/register/register?device_id=${this.deviceId}`
|
||
: '/pages/register/register';
|
||
uni.redirectTo({ url });
|
||
},
|
||
|
||
goToScan() {
|
||
uni.redirectTo({ url: '/pages/index/scan' });
|
||
},
|
||
|
||
/**
|
||
* Mock 登录（跳过微信授权，调用真实登录接口）
|
||
*/
|
||
async mockLogin() {
|
||
const mode = config.mockWechatLogin;
|
||
const mock = config.mockUser;
|
||
const mockOpenid = mock.user_info.open_id;
|
||
|
||
// 'skip' 模式直接登录，不调接口
|
||
if (mode === 'skip') {
|
||
this.statusText = '模拟登录中...';
|
||
uni.setStorageSync('token', mock.token);
|
||
uni.setStorageSync('openid', mockOpenid);
|
||
console.log('[Auth] Mock skip → home');
|
||
setTimeout(() => this.goToHome(), 500);
|
||
return;
|
||
}
|
||
|
||
// 'register' / 'login' 模式：调用真实登录接口，传 mock openid
|
||
this.statusText = '模拟：调用登录接口...';
|
||
const appNo = uni.getStorageSync('app_no') || config.mockAppNo;
|
||
|
||
try {
|
||
const res = await gatewayPost('/api/v1/user/login', {
|
||
app_no: appNo,
|
||
openid: mockOpenid,
|
||
});
|
||
|
||
const data = res.data || {};
|
||
console.log('[Auth] Mock login response:', JSON.stringify(data, null, 2));
|
||
|
||
if (data.code === 0 && data.data) {
|
||
const result = data.data;
|
||
|
||
// 存储 openid
|
||
uni.setStorageSync('openid', result.openid || mockOpenid);
|
||
|
||
if (result.register) {
|
||
// 已注册 → 存 token → 跳首页
|
||
uni.setStorageSync('token', result.token);
|
||
console.log('[Auth] Mock: existing user → home');
|
||
this.goToHome();
|
||
} else {
|
||
// 未注册 → 存 temp_token → 跳注册页
|
||
uni.setStorageSync('temp_token', result.temp_token);
|
||
console.log('[Auth] Mock: new user → register');
|
||
this.goToRegister();
|
||
}
|
||
} else {
|
||
uni.showToast({ title: data.message || '登录失败', icon: 'none' });
|
||
console.error('[Auth] Mock login failed:', data);
|
||
}
|
||
} catch (e) {
|
||
console.error('[Auth] Mock login error:', e);
|
||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
page {
|
||
height: 100%;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.loading-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border: 6rpx solid #e5e5e5;
|
||
border-top-color: #2979ff;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
</style>
|