feat(登录)

This commit is contained in:
unknown 2024-05-29 00:54:59 +08:00
parent 24526bd526
commit a7acb9dce0
6 changed files with 620 additions and 438 deletions

View File

@ -63,6 +63,57 @@
}
}
],
"subPackages": [
{
"root": "pages/public",
"pages": [{
"path": "setting",
"style": {
"navigationBarTitleText": "系统设置"
},
"meta": {
"sync": true,
"title": "系统设置",
"group": "通用"
}
},
{
"path": "richtext",
"style": {
"navigationBarTitleText": "富文本"
},
"meta": {
"sync": true,
"title": "富文本",
"group": "通用"
}
},
{
"path": "faq",
"style": {
"navigationBarTitleText": "常见问题"
},
"meta": {
"sync": true,
"title": "常见问题",
"group": "通用"
}
},
{
"path": "error",
"style": {
"navigationBarTitleText": "错误页面"
}
},
{
"path": "webview",
"style": {
"navigationBarTitleText": ""
}
}
]
}
],
"tabBar": {
"list": [
{

39
pages/public/error.vue Normal file
View File

@ -0,0 +1,39 @@
<!-- 错误界面 -->
<template>
<view class="error-page">
<s-empty v-if="errCode === 'NetworkError'" icon="/static/internet-empty.png" text="网络连接失败" showAction
actionText="重新连接" @clickAction="onReconnect" buttonColor="#ff3000" />
<s-empty v-else-if="errCode === 'TemplateError'" icon="/static/internet-empty.png" text="未找到模板" showAction
actionText="重新加载" @clickAction="onReconnect" buttonColor="#ff3000" />
<s-empty v-else-if="errCode !== ''" icon="/static/internet-empty.png" :text="errMsg" showAction actionText="重新加载"
@clickAction="onReconnect" buttonColor="#ff3000" />
</view>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { peachInit } from '@/peach';
const errCode = ref('');
const errMsg = ref('');
onLoad((options) => {
errCode.value = options.errCode;
errMsg.value = options.errMsg;
});
//
async function onReconnect() {
uni.reLaunch({
url: '/pages/index/index',
});
await peachInit();
}
</script>
<style lang="scss" scoped>
.error-page {
width: 100%;
}
</style>

View File

@ -3,34 +3,34 @@
* @description api 模块管理loading 配置请求拦截错误处理
*/
import Request from 'luch-request'
import { baseUrl, apiPath } from '@/peach/config'
import $store from '@/peach/store'
import { showAuthModal } from '@/peach/hooks/useModal'
import AuthUtil from '@/peach/api/member/auth'
import Request from "luch-request";
import { baseUrl, apiPath } from "@/peach/config";
import peach from "@/peach";
import $store from "@/peach/store";
import AuthUtil from "@/peach/api/member/auth";
const options = {
// 显示操作成功消息 默认不显示
showSuccess: false,
// 成功提醒 默认使用后端返回值
successMsg: '',
successMsg: "",
// 显示失败消息 默认显示
showError: true,
// 失败提醒 默认使用后端返回信息
errorMsg: '',
errorMsg: "",
// 显示请求时loading模态框 默认显示
showLoading: true,
// loading提醒文字
loadingMsg: '加载中',
loadingMsg: "加载中",
// 需要授权才能请求 默认放开
auth: false,
}
};
// Loading全局实例
let LoadingInstance = {
target: null,
count: 0,
}
};
/**
* @author Ankkaya
@ -39,21 +39,21 @@ let LoadingInstance = {
* @returns {Type}
*/
function closeLoading() {
if (LoadingInstance.count > 0) LoadingInstance.count--
if (LoadingInstance.count === 0) uni.hideLoading()
if (LoadingInstance.count > 0) LoadingInstance.count--;
if (LoadingInstance.count === 0) uni.hideLoading();
}
// 请求实例
const http = new Request({
baseUrl: baseUrl + apiPath,
timeout: 8000,
method: 'GET',
method: "GET",
header: {
Accept: 'text/json',
'Content-Type': 'application/json;charset=UTF-8',
Accept: "text/json",
"Content-Type": "application/json;charset=UTF-8",
},
custom: options,
})
});
/**
* @author Ankkaya
@ -65,37 +65,37 @@ const http = new Request({
http.interceptors.request.use(
(config) => {
// 自定义处理【auth 授权】:必须登录的接口,否则提示登录
if (config.custom.auth && !$store('user').isLogin) {
if (config.custom.auth && !$store("user").isLogin) {
// 处理登录
showAuthModal()
return Promise.reject()
peach.$router.go("/pages/index/login");
return Promise.reject();
}
// 自定义处理【loading 加载中】:如果需要显示 loading则显示 loading
if (config.custom.showLoading) {
LoadingInstance.count++
LoadingInstance.count++;
LoadingInstance.count === 1 &&
uni.showLoading({
title: config.custom.loadingMsg,
mask: true,
fail: () => {
uni.hideLoading()
uni.hideLoading();
},
})
});
}
// 增加 token 令牌、terminal 终端、tenant 租户的请求头
const token = getAccessToken()
const token = getAccessToken();
if (token) {
config.header['Authorization'] = token
config.header["Authorization"] = token;
}
config.header['Accept'] = '*/*'
return config
config.header["Accept"] = "*/*";
return config;
},
(error) => {
return Promise.reject(error)
return Promise.reject(error);
}
)
);
/**
* @author Ankkaya
@ -105,97 +105,105 @@ http.interceptors.request.use(
*/
http.interceptors.response.use(
(response) => {
console.log('response', response)
console.log("response", response);
// 约定:如果是 /auth/ 下的 URL 地址,并且返回了 accessToken 说明是登录相关的接口,则自动设置登陆令牌
if (response.config.url.indexOf('/member/auth/') >= 0 && response.data?.data?.accessToken) {
$store('user').setToken(response.data.data.accessToken, response.data.data.refreshToken)
if (
response.config.url.indexOf("/member/auth/") >= 0 &&
response.data?.data?.accessToken
) {
$store("user").setToken(
response.data.data.accessToken,
response.data.data.refreshToken
);
}
// 自定处理【loading 加载中】:如果需要显示 loading则关闭 loading
response.config.custom.showLoading && closeLoading()
response.config.custom.showLoading && closeLoading();
// 自定义处理【error 错误提示】:如果需要显示错误提示,则显示错误提示
if (response.data.code !== 0) {
// 特殊:如果 401 错误码,则跳转到登录页 or 刷新令牌
if (response.data.code === 401) {
return refreshToken(response.config)
return refreshToken(response.config);
}
// 错误提示
if (response.config.custom.showError) {
uni.showToast({
title: response.data.msg || '服务器开小差啦,请稍后再试~',
icon: 'none',
title: response.data.msg || "服务器开小差啦,请稍后再试~",
icon: "none",
mask: true,
})
return Promise.reject(false)
});
return Promise.reject(false);
}
}
// 自定义处理【showSuccess 成功提示】:如果需要显示成功提示,则显示成功提示
if (
response.config.custom.showSuccess &&
response.config.custom.successMsg !== '' &&
response.config.custom.successMsg !== "" &&
response.data.code === 0
) {
uni.showToast({
title: response.config.custom.successMsg,
icon: 'none',
})
icon: "none",
});
}
// 返回结果:包括 code + data + msg
return Promise.resolve(response.data)
return Promise.resolve(response.data);
},
(error) => {
console.log('error', error)
const userStore = $store('user')
const isLogin = userStore.isLogin
let errorMessage = '网络请求出错'
console.log("error", error);
const userStore = $store("user");
const isLogin = userStore.isLogin;
let errorMessage = "网络请求出错";
if (error !== undefined) {
switch (error.statusCode) {
case 400:
errorMessage = '请求错误'
break
errorMessage = "请求错误";
break;
case 401:
errorMessage = isLogin ? '您的登陆已过期' : '请先登录'
errorMessage = isLogin ? "您的登陆已过期" : "请先登录";
// 正常情况下,后端不会返回 401 错误,所以这里不处理 handleAuthorized
break
break;
case 403:
errorMessage = '拒绝访问'
break
errorMessage = "拒绝访问";
break;
case 404:
errorMessage = '请求出错'
break
errorMessage = "请求出错";
break;
case 408:
errorMessage = '请求超时'
break
errorMessage = "请求超时";
break;
case 429:
errorMessage = '请求频繁, 请稍后再访问'
break
errorMessage = "请求频繁, 请稍后再访问";
break;
case 500:
errorMessage = '服务器开小差啦,请稍后再试~'
break
errorMessage = "服务器开小差啦,请稍后再试~";
break;
case 501:
errorMessage = '服务未实现'
break
errorMessage = "服务未实现";
break;
case 502:
errorMessage = '网络错误'
break
errorMessage = "网络错误";
break;
case 503:
errorMessage = '服务不可用'
break
errorMessage = "服务不可用";
break;
case 504:
errorMessage = '网络超时'
break
errorMessage = "网络超时";
break;
case 505:
errorMessage = 'HTTP 版本不受支持'
break
errorMessage = "HTTP 版本不受支持";
break;
}
if (error.errMsg.includes('timeout')) errorMessage = '请求超时'
if (error.errMsg.includes("timeout")) errorMessage = "请求超时";
// #ifdef H5
if (error.errMsg.includes('Network'))
errorMessage = window.navigator.onLine ? '服务器异常' : '请检查您的网络连接'
if (error.errMsg.includes("Network"))
errorMessage = window.navigator.onLine
? "服务器异常"
: "请检查您的网络连接";
// #endif
}
@ -203,95 +211,95 @@ http.interceptors.response.use(
if (error.config.custom.showError === true) {
uni.showToast({
title: error.data?.msg || errorMessage,
icon: 'none',
icon: "none",
mask: true,
})
});
}
error.config.custom.showLoading && closeLoading()
error.config.custom.showLoading && closeLoading();
}
return Promise.reject(false)
return Promise.reject(false);
}
)
);
let requestList = [] // 请求队列
let isRefreshToken = false // 是否正在刷新中
let requestList = []; // 请求队列
let isRefreshToken = false; // 是否正在刷新中
const refreshToken = async (config) => {
// 如果当前已经是 refresh-token 的 URL 地址,并且还是 401 错误,说明是刷新令牌失败了,直接返回 Promise.reject(error)
if (config.url.indexOf('/member/auth/refresh-token') >= 0) {
return Promise.reject('error')
if (config.url.indexOf("/member/auth/refresh-token") >= 0) {
return Promise.reject("error");
}
// 如果未认证,并且未进行刷新令牌,说明可能是访问令牌过期了
if (!isRefreshToken) {
isRefreshToken = true
isRefreshToken = true;
// 1. 如果获取不到刷新令牌,则只能执行登出操作
const refreshToken = getRefreshToken()
const refreshToken = getRefreshToken();
if (!refreshToken) {
return handleAuthorized()
return handleAuthorized();
}
// 2. 进行刷新访问令牌
try {
const refreshTokenResult = await AuthUtil.refreshToken(refreshToken)
const refreshTokenResult = await AuthUtil.refreshToken(refreshToken);
if (refreshTokenResult.code !== 0) {
// 如果刷新不成功,直接抛出 e 触发 2.2 的逻辑
// noinspection ExceptionCaughtLocallyJS
throw new Error('刷新令牌失败')
throw new Error("刷新令牌失败");
}
// 2.1 刷新成功,则回放队列的请求 + 当前请求
config.header.Authorization = 'Bearer ' + getAccessToken()
config.header.Authorization = "Bearer " + getAccessToken();
requestList.forEach((cb) => {
cb()
})
requestList = []
return request(config)
cb();
});
requestList = [];
return request(config);
} catch (e) {
// 为什么需要 catch 异常呢?刷新失败时,请求因为 Promise.reject 触发异常。
// 2.2 刷新失败,只回放队列的请求
requestList.forEach((cb) => {
cb()
})
cb();
});
// 提示是否要登出。即不回放当前请求!不然会形成递归
return handleAuthorized()
return handleAuthorized();
} finally {
requestList = []
isRefreshToken = false
requestList = [];
isRefreshToken = false;
}
} else {
// 添加到队列,等待刷新获取到新的令牌
return new Promise((resolve) => {
requestList.push(() => {
config.header.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
resolve(request(config))
})
})
config.header.Authorization = "Bearer " + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
resolve(request(config));
});
});
}
}
};
/** 处理 401 未登陆的错误 */
const handleAuthorized = () => {
const userStore = $store('user')
userStore.logout(true)
showAuthModal()
const userStore = $store("user");
userStore.logout(true);
peach.$router.go("/pages/index/login");
// 登录超时
return Promise.reject({
code: 401,
msg: userStore.isLogin ? '您的登陆已过期' : '请先登录',
})
}
msg: userStore.isLogin ? "您的登陆已过期" : "请先登录",
});
};
/** 获得访问令牌 */
const getAccessToken = () => {
return uni.getStorageSync('token')
}
return uni.getStorageSync("token");
};
/** 获得刷新令牌 */
const getRefreshToken = () => {
return uni.getStorageSync('refresh-token')
}
return uni.getStorageSync("refresh-token");
};
const request = (config) => {
return http.middleware(config)
}
return http.middleware(config);
};
export default request
export default request;

View File

@ -1,12 +1,12 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
import $platform from '@/peach/platform'
import $router from '@/peach/router'
import user from './user'
import useSysStore from './sys'
import { ref } from "vue";
import { defineStore } from "pinia";
import $platform from "@/peach/platform";
import $router from "@/peach/router";
import useUserStore from "./user";
import useSysStore from "./sys";
const useAppStore = defineStore(
'app',
"app",
() => {
/**
* @description 应用信息
@ -19,14 +19,14 @@ const useAppStore = defineStore(
* @param string filesystem 文件系统
*/
const info = ref({
name: '',
logo: '',
version: '',
copyright: '',
copytime: '',
cdnurl: '',
filesystem: '',
})
name: "",
logo: "",
version: "",
copyright: "",
copytime: "",
cdnurl: "",
filesystem: "",
});
/**
* @description 平台信息
@ -41,12 +41,12 @@ const useAppStore = defineStore(
methods: [],
forwardInfo: {},
posterInfo: {},
linkAddress: '',
linkAddress: "",
},
bindMobile: 0,
})
});
const chat = ref({})
const chat = ref({});
/**
* @description 模板信息
@ -58,46 +58,50 @@ const useAppStore = defineStore(
tabbar: {
items: [
{
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png',
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
text: '首页',
url: '/pages/index/index',
activeIconUrl:
"http://mall.yudao.iocoder.cn/static/images/1-002.png",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
text: "首页",
url: "/pages/index/index",
},
{
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png',
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
text: '产品',
url: '/pages/index/product',
activeIconUrl:
"http://mall.yudao.iocoder.cn/static/images/2-002.png",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
text: "产品",
url: "/pages/index/product",
},
{
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png',
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
text: '订单',
url: '/pages/order/list',
activeIconUrl:
"http://mall.yudao.iocoder.cn/static/images/3-002.png",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
text: "订单",
url: "/pages/order/list",
},
{
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png',
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
text: '我的',
url: '/pages/index/my',
activeIconUrl:
"http://mall.yudao.iocoder.cn/static/images/4-002.png",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
text: "我的",
url: "/pages/index/my",
},
],
style: {
activeColor: '#fc4141',
bgColor: '#fff',
bgType: 'color',
color: '#282828',
activeColor: "#fc4141",
bgColor: "#fff",
bgType: "color",
color: "#282828",
},
theme: 'red',
theme: "red",
},
},
})
});
// 全局分享信息
const shareInfo = ref({})
const shareInfo = ref({});
// 小程序发货信息管理 0: 没有 1
const hasWechatTradeManaged = ref(0)
const hasWechatTradeManaged = ref(0);
/**
* @author Ankkaya
@ -107,52 +111,52 @@ const useAppStore = defineStore(
*/
async function init() {
// 检查网络
const networkStatus = await $platform.checkNetwork()
const networkStatus = await $platform.checkNetwork();
if (!networkStatus) {
$router.error('NetworkError')
$router.error("NetworkError");
}
if (true) {
this.info = {
name: '🍑商城',
logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
version: '1.0.0',
copyright: '全部开源,个人与企业可 100% 免费使用',
copytime: 'Copyright© 2018-2024',
name: "🍑商城",
logo: "https://static.iocoder.cn/ruoyi-vue-pro-logo.png",
version: "1.0.0",
copyright: "全部开源,个人与企业可 100% 免费使用",
copytime: "Copyright© 2018-2024",
cdnurl: 'https://file.sheepjs.com', // 云存储域名
filesystem: 'qcloud', // 云存储平台
}
cdnurl: "https://file.sheepjs.com", // 云存储域名
filesystem: "qcloud", // 云存储平台
};
this.platform = {
share: {
methods: ['poster', 'link'],
linkAddress: 'https://shopro.sheepjs.com/#/',
methods: ["poster", "link"],
linkAddress: "https://shopro.sheepjs.com/#/",
posterInfo: {
user_bg: '/static/img/shop/config/user-poster-bg.png',
goods_bg: '/static/img/shop/config/goods-poster-bg.png',
groupon_bg: '/static/img/shop/config/groupon-poster-bg.png',
user_bg: "/static/img/shop/config/user-poster-bg.png",
goods_bg: "/static/img/shop/config/goods-poster-bg.png",
groupon_bg: "/static/img/shop/config/groupon-poster-bg.png",
},
},
bind_mobile: 0,
}
};
this.chat = {
chat_domain: 'https://api.shopro.sheepjs.com/chat',
room_id: 'admin',
}
this.has_wechat_trade_managed = 0
chat_domain: "https://api.shopro.sheepjs.com/chat",
room_id: "admin",
};
this.has_wechat_trade_managed = 0;
// 加载主题
const sysStore = useSysStore()
sysStore.setTheme()
const sysStore = useSysStore();
sysStore.setTheme();
// 模拟用户登录
const userStore = user()
const userStore = useUserStore();
if (userStore.isLogin) {
userStore.loginAfter()
userStore.loginAfter();
}
return Promise.resolve(true)
return Promise.resolve(true);
} else {
$router.error('InitError', res.msg || '加载失败')
$router.error("InitError", res.msg || "加载失败");
}
}
@ -164,18 +168,18 @@ const useAppStore = defineStore(
shareInfo,
hasWechatTradeManaged,
init,
}
};
},
{
persist: {
enabled: true,
strategies: [
{
key: 'app-store',
key: "app-store",
},
],
},
}
)
);
export default useAppStore
export default useAppStore;

View File

@ -1,30 +1,110 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
import { isEmpty, cloneDeep, clone } from 'lodash'
import { ref } from "vue";
import { defineStore } from "pinia";
import $share from '@/peach/platform/share'
import { isEmpty, cloneDeep, clone } from "lodash";
const useUserStore = defineStore('user', () => {
const userInfo = ref()
const isLogin = ref(!!uni.getStorageSync('token'))
// 默认用户信息
const defaultUserInfo = {
avatar: "", // 头像
nickname: "", // 昵称
gender: 0, // 性别
mobile: "", // 手机号
point: 0, // 积分
};
function setToken(accessToken, refreshToken) {
if (token === '') {
isLogin.value = false
uni.removeStorageSync('token')
uni.removeStorageSync('refresh-token')
// 默认钱包信息
const defaultWallet = {
balance: 0, // 余额
};
// 默认订单信息
const defaultNumData = {
unusedCouponCount: 0,
orderCount: {
allCount: 0,
unpaidCount: 0,
undeliveredCount: 0,
deliveredCount: 0,
uncommentedCount: 0,
afterSaleCount: 0,
},
};
const useUserStore = defineStore(
"user",
() => {
const userInfo = ref(clone(defaultUserInfo));
const userWallet = ref(clone(defaultWallet));
const userNumData = ref(cloneDeep(defaultNumData));
const isLogin = ref(!!uni.getStorageSync("token"));
const lastUpdateTime = ref(0)
function getUserInfo() {}
function getWallet() {}
function getNumData() {}
function setToken(token, refreshToken) {
if (token === "") {
isLogin.value = false;
uni.removeStorageSync("token");
uni.removeStorageSync("refresh-token");
} else {
isLogin.value = true
uni.setStorageSync('token', token)
uni.setStorageSync('refresh-token', refreshToken)
isLogin.value = true;
uni.setStorageSync("token", token);
uni.setStorageSync("refresh-token", refreshToken);
// 成功后处理
loginAfter();
}
return isLogin.value
return isLogin.value;
}
function resetUserData() {
setToken("");
userInfo.value = clone(defaultUserInfo);
userWallet.value = clone(defaultWallet);
userNumData.value = cloneDeep(defaultNumData);
}
function updateUserData() {
const nowTime = new Date().getTime()
if (lastUpdateTime.value + 5000 > nowTime) {
return
}
lastUpdateTime.value = nowTime
await getUserInfo()
getWallet()
getNumData()
return userInfo.value
}
function loginAfter() {
updateUserData()
$share.getShareInfo()
}
function logOut() {
resetUserData();
return !isLogin.value
}
return {
userInfo,
isLogin,
setToken,
logOut
};
},
{
persist: true,
strategies: [
{
key: "user-store",
},
],
}
})
);
export default useUserStore
export default useUserStore;

BIN
static/internet-empty.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB