fix: 安全入口逻辑调整 (#863)

This commit is contained in:
ssongliu 2023-05-04 16:40:37 +08:00 committed by GitHub
parent f4716cb62f
commit 15c0d0074b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 164 additions and 25 deletions

View File

@ -13,7 +13,7 @@ export const checkStatus = (status: number, msg: string): void => {
MsgError(msg ? msg : i18n.global.t('commons.res.notFound'));
break;
case 403:
router.replace({ path: '/login', params: { code: globalStore.entrance } });
router.replace({ name: 'entrance', params: { code: globalStore.entrance } });
MsgError(msg ? msg : i18n.global.t('commons.res.forbidden'));
break;
case 500:

View File

@ -43,7 +43,7 @@ class RequestHttp {
}
if (data.code == ResultEnum.OVERDUE || data.code == ResultEnum.FORBIDDEN) {
router.push({
name: 'login',
name: 'entrance',
params: { code: globalStore.entrance },
});
return Promise.reject(data);

View File

@ -80,7 +80,7 @@ const logout = () => {
})
.then(() => {
systemLogOut();
router.push({ name: 'login', params: { code: globalStore.entrance } });
router.push({ name: 'entrance', params: { code: globalStore.entrance } });
globalStore.setLogStatus(false);
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
})

View File

@ -17,7 +17,7 @@ router.beforeEach((to, from, next) => {
const globalStore = GlobalStore();
if (!globalStore.isLogin) {
next({
name: 'login',
name: 'entrance',
params: { code: globalStore.entrance },
});
NProgress.done();

View File

@ -58,7 +58,7 @@ menuList.unshift(homeRouter);
export const routes: RouteRecordRaw[] = [
homeRouter,
{
path: '/login/:code?',
path: '/login',
name: 'login',
props: true,
component: () => import('@/views/login/index.vue'),
@ -67,6 +67,12 @@ export const routes: RouteRecordRaw[] = [
key: 'login',
},
},
{
path: '/:code?',
name: 'entrance',
component: () => import('@/views/login/entrance/index.vue'),
props: true,
},
...routerArray,
{
path: '/:pathMatch(.*)',

View File

@ -0,0 +1,142 @@
<template>
<div>
<div class="login-backgroud" v-if="isSafety">
<div class="login-wrapper">
<div :class="screenWidth > 1110 ? 'left inline-block' : ''">
<div class="login-title">
<span>{{ $t('commons.login.title') }}</span>
</div>
<img src="@/assets/images/1panel-login.png" alt="" v-if="screenWidth > 1110" />
</div>
<div :class="screenWidth > 1110 ? 'right inline-block' : ''">
<div class="login-container">
<LoginForm ref="loginRef"></LoginForm>
</div>
</div>
</div>
</div>
<div v-if="!isSafety">
<UnSafe />
</div>
</div>
</template>
<script setup lang="ts" name="login">
import { checkIsSafety } from '@/api/modules/auth';
import LoginForm from '../components/login-form.vue';
import UnSafe from '@/components/error-message/unsafe.vue';
import { ref, onMounted } from 'vue';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const isSafety = ref(true);
const screenWidth = ref(null);
const mySafetyCode = defineProps({
code: {
type: String,
required: true,
default: '',
},
});
const getStatus = async () => {
const res = await checkIsSafety(mySafetyCode.code);
isSafety.value = res.data;
if (isSafety.value) {
globalStore.entrance = mySafetyCode.code;
}
};
onMounted(() => {
getStatus();
screenWidth.value = document.body.clientWidth;
window.onresize = () => {
return (() => {
screenWidth.value = document.body.clientWidth;
})();
};
});
</script>
<style scoped lang="scss">
@mixin login-center {
display: flex;
justify-content: center;
align-items: center;
}
.login-backgroud {
height: 100vh;
background: url(@/assets/images/1panel-login-bg.png) no-repeat,
radial-gradient(153.25% 257.2% at 118.99% 181.67%, rgba(50, 132, 255, 0.2) 0%, rgba(82, 120, 255, 0) 100%)
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
radial-gradient(123.54% 204.83% at 25.87% 195.17%, rgba(111, 76, 253, 0.15) 0%, rgba(122, 76, 253, 0) 78.85%)
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
linear-gradient(0deg, rgba(0, 94, 235, 0.03), rgba(0, 94, 235, 0.03)),
radial-gradient(109.58% 109.58% at 31.53% -36.58%, rgba(0, 94, 235, 0.3) 0%, rgba(0, 94, 235, 0) 100%)
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
rgba(0, 57, 142, 0.05);
.login-wrapper {
padding-top: 8%;
width: 80%;
margin: 0 auto;
// @media only screen and (max-width: 1440px) {
// width: 100%;
// padding-top: 6%;
// }
.left {
vertical-align: middle;
text-align: right;
width: 60%;
img {
object-fit: contain;
width: 100%;
@media only screen and (min-width: 1440px) {
width: 85%;
}
}
}
.right {
vertical-align: middle;
width: 40%;
}
}
.login-title {
text-align: right;
margin-right: 10%;
span:first-child {
color: $primary-color;
font-size: 40px;
font-family: pingFangSC-Regular;
font-weight: 600;
// @media only screen and (max-width: 1440px) {
// margin-left: 0;
// }
}
@media only screen and (max-width: 1110px) {
margin-bottom: 20px;
font-size: 35px;
text-align: center;
margin-right: 0;
}
}
.login-container {
margin-top: 40px;
padding: 40px 0;
width: 390px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.55);
border-radius: 4px;
box-shadow: 2px 4px 22px rgba(0, 94, 235, 0.2);
@media only screen and (max-width: 1440px) {
margin-top: 60px;
}
@media only screen and (max-width: 1110px) {
margin: 60px auto 0;
}
}
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<div>
<div class="login-backgroud" v-if="isSafety">
<div class="login-backgroud">
<div class="login-wrapper">
<div :class="screenWidth > 1110 ? 'left inline-block' : ''">
<div class="login-title">
@ -15,34 +15,25 @@
</div>
</div>
</div>
<div v-if="!isSafety">
<UnSafe />
</div>
</div>
</template>
<script setup lang="ts" name="login">
import { checkIsSafety } from '@/api/modules/auth';
import LoginForm from './components/login-form.vue';
import UnSafe from '@/components/error-message/unsafe.vue';
import { ref, onMounted } from 'vue';
import router from '@/routers';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const isSafety = ref(true);
const screenWidth = ref(null);
interface Props {
code: string;
}
const mySafetyCode = withDefaults(defineProps<Props>(), {
code: '',
});
const getStatus = async () => {
const res = await checkIsSafety(mySafetyCode.code);
isSafety.value = res.data;
globalStore.entrance = mySafetyCode.code;
const res = await checkIsSafety(globalStore.entrance);
if (!res.data) {
router.replace({ name: 'entrance' });
}
};
onMounted(() => {

View File

@ -194,7 +194,7 @@ const onSaveUserName = async (formEl: FormInstance | undefined, key: string, val
await logOutApi();
loading.value = false;
MsgSuccess(i18n.t('commons.msg.operationSuccess'));
router.push({ name: 'login', params: { code: globalStore.entrance } });
router.push({ name: 'entrance', params: { code: globalStore.entrance } });
globalStore.setLogStatus(false);
return;
})
@ -250,7 +250,7 @@ const onSave = async (formEl: FormInstance | undefined, key: string, val: any) =
await logOutApi();
loading.value = false;
MsgSuccess(i18n.t('commons.msg.operationSuccess'));
router.push({ name: 'login', params: { code: globalStore.entrance } });
router.push({ name: 'entrance', params: { code: globalStore.entrance } });
globalStore.setLogStatus(false);
return;
}

View File

@ -119,7 +119,7 @@ const submitChangePassword = async (formEl: FormInstance | undefined) => {
passwordVisiable.value = false;
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
await logOutApi();
router.push({ name: 'login', params: { code: globalStore.entrance } });
router.push({ name: 'entrance', params: { code: globalStore.entrance } });
globalStore.setLogStatus(false);
})
.catch(() => {

View File

@ -59,7 +59,7 @@ const acceptParams = (params: DialogProps): void => {
};
const random = async () => {
securityEntrance.value = getRandomStr(8);
securityEntrance.value = getRandomStr(10);
};
const submitEntrance = async () => {