feat:去除路由守卫以及测试

This commit is contained in:
Xwen
2023-12-14 23:29:36 +08:00
parent 088a76b3cc
commit 8ad5f28e99
5 changed files with 103 additions and 90 deletions

View File

@@ -1,5 +1,5 @@
# 接口前缀 # 接口前缀
VITE_APP_BASEAPI="/api-dev" VITE_APP_BASEAPI="/api-dev"
# VITE_APP_URL="http://123.207.63.87:19001/api/app" VITE_APP_URL="http://123.207.63.87:19001/api/app"
VITE_APP_URL="http://localhost:19001/api/app" # VITE_APP_URL="http://localhost:19001/api/app"
VITE_APP_ENV_NAME = "dev" VITE_APP_ENV_NAME = "dev"

View File

@@ -1,131 +1,146 @@
<template > <template>
<div class="avatar"> <div class="avatar">
<div class="avatar-left"> <div class="avatar-left">
<el-avatar :size="props.size" :src="iconUrl" /> <el-avatar :size="props.size" :src="iconUrl" />
<div v-if="props.isSelf"> <div v-if="props.isSelf">
<div class="nick"> {{ userInfo.nick }}</div> <div class="nick">{{ userInfo.nick }}</div>
</div> </div>
<div v-if="!props.isSelf"> <div v-if="!props.isSelf">
<div class="nick" :class="{ mt_1: props.time != 'undefined' }">
<div class="nick" :class="{ mt_1: props.time != 'undefined' }"> {{ userInfo.nick }}</div> {{ userInfo.nick }}
<div class="remarks" v-if="props.time"> {{ props.time }}</div>
<div class="remarks">
<slot name="bottom" />
</div>
</div>
<div class="info" v-if="!props.isSelf">
<el-tag class="ml-2" type="warning">V8</el-tag>
<el-tag class="ml-2" type="danger">会员</el-tag>
</div>
</div> </div>
<div class="remarks" v-if="props.time">{{ props.time }}</div>
<div class="remarks">
<el-button v-if="props.showWatching" type="primary" size="default" icon="Plus">关注</el-button> <slot name="bottom" />
</div>
</div>
<div class="info" v-if="!props.isSelf">
<el-tag class="ml-2" type="warning">V8</el-tag>
<el-tag class="ml-2" type="danger">会员</el-tag>
</div>
</div> </div>
<el-button
v-if="props.showWatching"
type="primary"
size="default"
icon="Plus"
>关注</el-button
>
</div>
</template> </template>
<script setup> <script setup>
import useUserStore from '@/stores/user' import useUserStore from "@/stores/user";
import { reactive, watch, onMounted, computed, ref } from 'vue'; import { reactive, watch, onMounted, computed, ref } from "vue";
//userInfo //userInfo
//{icon,name,role,id},根据判断userInfo是否等于未定义来觉得是当前登录用户信息还是其他人信息 //{icon,name,role,id},根据判断userInfo是否等于未定义来觉得是当前登录用户信息还是其他人信息
const props = defineProps(['size', 'showWatching', 'time', 'userInfo', 'isSelf']) const props = defineProps([
"size",
"showWatching",
"time",
"userInfo",
"isSelf",
]);
const userStore = useUserStore(); const userStore = useUserStore();
const userInfo = reactive({ const userInfo = reactive({
icon: "", icon: "",
nick: "", nick: "",
role: [], role: [],
id: "" id: "",
}); });
const iconUrl=ref('/src/assets/logo.ico'); const iconUrl = ref("/src/assets/logo.ico");
const iconUrlHandler = () => { const iconUrlHandler = () => {
if (userInfo.icon == null || userInfo.icon == undefined || userInfo.icon == '') { if (
userInfo.icon == null ||
return '/src/assets/logo.ico'; userInfo.icon == undefined ||
} userInfo.icon == ""
return `${import.meta.env.VITE_APP_BASEAPI}/file/${userInfo.icon}`; ) {
} return "/src/assets/logo.ico";
}
return `${import.meta.env.VITE_APP_BASEAPI}/file/${userInfo.icon}`;
};
watch(userStore, (n) => { watch(userStore, (n) => {
if (props.userInfo == undefined) { if (props.userInfo == undefined) {
userInfo.nick = n.name; userInfo.nick = n.name;
} }
});
}) watch(
() => props,
watch(() => props, (n) => { (n) => {
Init(); Init();
}, { deep: true }) },
{ deep: true }
);
onMounted(() => { onMounted(() => {
Init(); Init();
}) });
const Init = () => { const Init = () => {
//使用传入值 //使用传入值
if (props.userInfo != undefined) { if (props.userInfo != undefined) {
userInfo.icon = props.userInfo.icon; userInfo.icon = props.userInfo.icon;
userInfo.nick = props.userInfo.nick; userInfo.nick = props.userInfo.nick;
userInfo.role = props.userInfo.role; userInfo.role = props.userInfo.role;
userInfo.id = props.userInfo.id; userInfo.id = props.userInfo.id;
iconUrl.value=iconUrlHandler(userInfo.icon) iconUrl.value = iconUrlHandler(userInfo.icon);
} console.log("使用传入值:", iconUrl.value);
}
//使用当前登录用户
else {
userInfo.icon = userStore.icon;
userInfo.nick = userStore.name;
userInfo.role = userStore.role;
userInfo.id = userStore.id;
iconUrl.value=userInfo.icon;
}
}
//使用当前登录用户
else {
userInfo.icon = userStore.icon;
userInfo.nick = userStore.name;
userInfo.role = userStore.role;
userInfo.id = userStore.id;
iconUrl.value = userInfo.icon;
console.log("当前登陆:", iconUrl.value);
}
};
</script> </script>
<style scoped> <style scoped>
.mt_1 { .mt_1 {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.nick { .nick {
font-weight: bold; font-weight: bold;
} }
.info { .info {
margin-top: 0.6rem; margin-top: 0.6rem;
margin-left: 1rem; margin-left: 1rem;
} }
.info .el-tag { .info .el-tag {
margin-right: 1rem; margin-right: 1rem;
} }
.el-icon { .el-icon {
color: white; color: white;
} }
.avatar { .avatar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.avatar-left { .avatar-left {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.el-avatar { .el-avatar {
margin-right: 1.2rem; margin-right: 1.2rem;
} }
.remarks { .remarks {
padding-top: 0.5rem; padding-top: 0.5rem;
color: #8C8C8C; color: #8c8c8c;
} }
</style> </style>

View File

@@ -41,7 +41,8 @@ router.beforeEach((to, from, next) => {
// 在免登录白名单,直接进入 // 在免登录白名单,直接进入
next(); next();
} else { } else {
next(`/login?redirect=${to.path}&unTourist=true`); // 否则全部重定向到登录页 next();
// next(`/login?redirect=${to.path}&unTourist=true`); // 否则全部重定向到登录页
NProgress.done(); NProgress.done();
} }
} }

View File

@@ -47,7 +47,7 @@ const useUserStore = defineStore("user", {
user.icon == "" || user.icon == null user.icon == "" || user.icon == null
? "/src/assets/logo.ico" ? "/src/assets/logo.ico"
: import.meta.env.VITE_APP_BASEAPI + "/file/" + user.icon; : import.meta.env.VITE_APP_BASEAPI + "/file/" + user.icon;
console.log(avatar, "store的avatar");
if (res.roleCodes && res.roleCodes.length > 0) { if (res.roleCodes && res.roleCodes.length > 0) {
// 验证返回的roles是否是一个非空数组 // 验证返回的roles是否是一个非空数组
this.roles = res.roleCodes; this.roles = res.roleCodes;

View File

@@ -26,7 +26,7 @@
</el-form> </el-form>
<RouterLink to="/register"> 没有账号前往注册</RouterLink> <RouterLink to="/register"> 没有账号前往注册</RouterLink>
<button class="login-btn" @click="login(loginFormRef)"> </button> <button class="login-btn" @click="login(loginFormRef)"> </button>
<button class="login-btn" @click="guestlogin">游客临时登录</button> <button class="login-btn" @click="guestlogin">访客</button>
</div> </div>
<div class="divider"> <div class="divider">
@@ -76,9 +76,6 @@ const loginForm = reactive({
code: "", code: "",
}); });
const guestlogin = async () => { const guestlogin = async () => {
loginForm.userName = "guest";
loginForm.password = "123456";
await userStore.login(loginForm);
const redirect = route.query?.redirect ?? "/index"; const redirect = route.query?.redirect ?? "/index";
router.push(redirect); router.push(redirect);
}; };