mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-11-25 19:49:14 +08:00
fix: 安全入口逻辑调整 (#863)
This commit is contained in:
parent
f4716cb62f
commit
15c0d0074b
@ -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:
|
||||
|
@ -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);
|
||||
|
@ -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'));
|
||||
})
|
||||
|
@ -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();
|
||||
|
@ -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(.*)',
|
||||
|
142
frontend/src/views/login/entrance/index.vue
Normal file
142
frontend/src/views/login/entrance/index.vue
Normal 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>
|
@ -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(() => {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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(() => {
|
||||
|
@ -59,7 +59,7 @@ const acceptParams = (params: DialogProps): void => {
|
||||
};
|
||||
|
||||
const random = async () => {
|
||||
securityEntrance.value = getRandomStr(8);
|
||||
securityEntrance.value = getRandomStr(10);
|
||||
};
|
||||
|
||||
const submitEntrance = async () => {
|
||||
|
Loading…
Reference in New Issue
Block a user