Skip to content

fix: 优化登陆页面特征信息 #7027

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f2c-ci-robot merged 1 commit into from
Nov 13, 2024
Merged

fix: 优化登陆页面特征信息 #7027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions backend/app/api/v1/auth.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package v1

import (
"encoding/base64"
"net/http"

"github.com/1Panel-dev/1Panel/backend/app/api/v1/helper"
"github.com/1Panel-dev/1Panel/backend/app/dto"
Expand Down Expand Up @@ -120,12 +121,13 @@ func (b *BaseApi) CheckIsSafety(c *gin.Context) {
return
}
if status == "disable" && len(code) != 0 {
helper.ErrorWithDetail(c, constant.CodeErrNotFound, constant.ErrTypeInternalServer, err)
helper.ErrResponse(c, http.StatusNotFound)
return
}
if status == "unpass" {
if middleware.LoadErrCode("err-entrance") != 200 {
helper.ErrResponse(c, middleware.LoadErrCode("err-entrance"))
code := middleware.LoadErrCode()
if code != 200 {
helper.ErrResponse(c, code)
return
}
helper.ErrorWithDetail(c, constant.CodeErrEntrance, constant.ErrTypeInternalServer, nil)
Copy link

@fit2cloudrd fit2cloudrd Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

该代码存在以下问题：

在 CheckIsSafety 函数中，函数名为 CheckIsSecurity。

建议修改为：

func CheckIsSecurity(c *gin.Context) {}

并移除 h
+

  • helper.ErrorWithDetail(c, constant.CodeErrNotFound, constant.ErrTypeInternalServer)

以上是需要进行调整的部分。

Expand Down
5 changes: 3 additions & 2 deletions backend/middleware/bind_domain.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,9 @@ func BindDomain() gin.HandlerFunc {
}

if domains != status.Value {
if LoadErrCode("err-domain") != 200 {
helper.ErrResponse(c, LoadErrCode("err-domain"))
code := LoadErrCode()
if code != 200 {
helper.ErrResponse(c, code)
return
}
helper.ErrorWithDetail(c, constant.CodeErrDomain, constant.ErrTypeInternalServer, errors.New("domain not allowed"))
Expand Down
2 changes: 1 addition & 1 deletion backend/middleware/helper.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import (
"github.com/1Panel-dev/1Panel/backend/app/repo"
)

func LoadErrCode(errInfo string) int {
func LoadErrCode() int {
settingRepo := repo.NewISettingRepo()
codeVal, err := settingRepo.Get(settingRepo.WithByKey("NoAuthSetting"))
if err != nil {
Expand Down
5 changes: 3 additions & 2 deletions backend/middleware/ip_limit.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,9 @@ func WhiteAllow() gin.HandlerFunc {
return
}
}
if LoadErrCode("err-ip") != 200 {
helper.ErrResponse(c, LoadErrCode("err-ip"))
code := LoadErrCode()
if code != 200 {
helper.ErrResponse(c, code)
return
}
helper.ErrorWithDetail(c, constant.CodeErrIP, constant.ErrTypeInternalServer, errors.New("IP address not allowed"))
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/api/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,12 +132,13 @@ class RequestHttp {
);
return;
default:
globalStore.isLogin = false;
globalStore.errStatus = 'code-' + response.status;
router.push({
name: 'entrance',
params: { code: globalStore.entrance },
});
return;
return Promise.reject(error);
}
}
if (!window.navigator.onLine) router.replace({ path: '/500' });
Expand Down
6 changes: 0 additions & 6 deletions frontend/src/components/error-message/error_code.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,3 @@ const loadErrInfo = () => {
}
};
</script>

<style scoped lang="scss">
.container {
margin-left: 40%;
}
</style>
Copy link

@fit2cloudrd fit2cloudrd Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段HTML和SCSS代码的差异主要在于JavaScript函数loadErrInfo定义的位置与样式表导入时对行号的影响，这是比较常见的错误或疏忽之处。由于CSS文件中的语法错误导致不能正确执行JS加载事件处理程序，并且因为未指定行数导致在SCSS编译过程中可能触发某些警告。

为了修复这些错误：

对于 JavaScript 函数：

  • 将它移到 HTML 文件中一个可以被包含进去的功能的地方。

  • 可能的话，在其之后增加一行以明确它的位置，例如：

<script type="text/babel-core" src="./scripts/index.js"></script> (注意此行需要替换为实际模块路径)

对于 SCSS 的样式规则：

  • 阅读并确保所有的 CSS 占位符（如 @import 和 $variable */...) 是正确的引用了合适的文件名及相对路径。

  • 如果找不到相关 CSS 导入文件则应该考虑手动添加链接到对应目录下的文件

请务必根据具体情况进行相应调整：比如你使用的模板引擎是 Webpack 或 Create-react-app 这样的框架，请查看对应的配置指导来解决这些问题。如果你使用的是纯静态资源管理工具像 Gulp 和 Grunt 等，则需要关注如何引入、编译 SCSS 文件等操作过程。

59 changes: 28 additions & 31 deletions frontend/src/views/login/entrance/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
<template>
<div>
<div v-if="!loading">
<div class="login-background" v-if="errStatus === ''">
<div class="login-wrapper">
<div :class="screenWidth > 1110 ? 'left inline-block' : ''">
<div class="login-title">
<span>{{ globalStore.themeConfig.title || $t('setting.description') }}</span>
<div v-if="init">
<div v-if="errStatus === ''">
<div class="login-background">
<div class="login-wrapper">
<div :class="screenWidth > 1110 ? 'left inline-block' : ''">
<div class="login-title">
<span>{{ globalStore.themeConfig.title || $t('setting.description') }}</span>
</div>
<img src="@/assets/images/1panel-login.png" alt="" v-if="screenWidth > 1110" />
</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 :class="screenWidth > 1110 ? 'right inline-block' : ''">
<div class="login-container">
<LoginForm ref="loginRef"></LoginForm>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -46,45 +48,40 @@ import ErrIP from '@/components/error-message/err_ip.vue';
import ErrCode from '@/components/error-message/error_code.vue';
import ErrDomain from '@/components/error-message/err_domain.vue';
import ErrFound from '@/components/error-message/404.vue';
import { ref, onMounted, watch } from 'vue';
import { ref, onMounted } from 'vue';
import { GlobalStore } from '@/store';
import { getXpackSettingForTheme } from '@/utils/xpack';
const globalStore = GlobalStore();

const screenWidth = ref(null);
const errStatus = ref('');
const loading = ref();
const errStatus = ref('x');
const init = ref(false);

const mySafetyCode = defineProps({
code: {
type: String,
default: '',
},
});
watch(
() => globalStore.errStatus,
(newVal) => {
if (newVal?.startsWith('err-') || newVal?.startsWith('code-')) {
errStatus.value = newVal;
}
},
);

const getStatus = async () => {
let info = globalStore.errStatus;
if (info?.startsWith('err-') || info?.startsWith('code-')) {
errStatus.value = info;
return;
}
let code = mySafetyCode.code;
globalStore.entrance = code;
loading.value = true;
await checkIsSafety(code)
.then(() => {
loading.value = false;
let info = globalStore.errStatus;
if (info?.startsWith('err-') || info?.startsWith('code-')) {
errStatus.value = info;
init.value = true;
return;
}
errStatus.value = '';
init.value = true;
getXpackSettingForTheme();
})
.catch(() => {
loading.value = false;
.catch((err) => {
errStatus.value = 'code-' + err.status;
init.value = true;
});
};

Copy link

@fit2cloudrd fit2cloudrd Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在Vue项目中，我们不应该使用动态属性（$props）或静态方法来处理异常状态。更推荐的方式是将业务逻辑和错误响应合并到一个类上：

// components/LoginForm.vue

export default {
  name: "LoginForm", // Component's name

  props: {
    code: String
  },

  mounted()  {    
   // Error handler or logic goes here
  }

}

然后，在对应的组件模板中的 onBeforeCreate 生命周期钩子里进行初始化处理：

<login-form v-if="errStatus === ''"></login-form>`
</template>

<!-- 导入必要的CSS等文件 -->
<link rel=stylesheet href='/stylesheets/login.css'>

<!-- 添加样式表引用 -->

<script>
if (globalStore.globalStyle) {
 globalStore.$styleSheet.insertRule('.my-style {\n/* your rule */\n} ', null);
}

</script>

<!-- 其他需要挂载的方法... -->
</script>
<body/>
<style scoped>  
.login-container {
 /* your CSS styles */
}
.right inline-block{
 /* right and inline block margins can be useful for some layouts */
}
.left inline-block{  
 /* other margin utility classes like flex-start, center etc */

}


</style>

这可以确保代码保持清晰且易于维护。

Expand Down