tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-09-29 07:56:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复流量统计

Browse Source
This commit is contained in:
qaq
2025-06-18 14:41:25 +08:00
parent c3077b2922
commit 6df61832b9
9 changed files with 554 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
go-gost/main.go
-1
View File
@@ -118,7 +118,6 @@ func main() {
log := xlogger.NewLogger()
logger.SetDefault(log)
// 使用内存流量管理器
trafficMgr := traffic.GetGlobalManager()
defer trafficMgr.Close()
go-gost/traffic_reporter.go
+2 -2
View File
@@ -36,13 +36,13 @@ func StartTrafficReporter(trafficMgr traffic.Manager) {
return
}
ticker := time.NewTicker(1 * time.Second)
ticker := time.NewTicker(5 * time.Second)
go func() {
defer ticker.Stop()
for range ticker.C {
ctx, cancel := context.WithTimeout(context.Background(), 1*time.Second)
ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
// 先获取流量统计（不清零）
stats, err := trafficMgr.GetAllServicesStats(ctx)
go-gost/x/handler/forward/local/handler.go
+1 -1
View File
@@ -126,7 +126,7 @@ func (h *forwardHandler) Handle(ctx context.Context, conn net.Conn, opts ...hand
if h.trafficManager != nil {
go func() {
ticker := time.NewTicker(1 * time.Second)
ticker := time.NewTicker(5 * time.Second)
defer ticker.Stop()
// 记录上次的流量值
springboot-backend/src/main/java/com/admin/common/dto/ChangePasswordDto.java
+3
View File
@@ -7,6 +7,9 @@ import javax.validation.constraints.NotBlank;
@Data
public class ChangePasswordDto {
@NotBlank(message = "新用户名不能为空")
private String newUsername;
@NotBlank(message = "当前密码不能为空")
private String currentPassword;
springboot-backend/src/main/java/com/admin/controller/FlowController.java
+85 -77
View File
@@ -20,7 +20,7 @@ import java.util.stream.Collectors;
/**
* 流量上报控制器
* 处理节点上报的流量数据，更新用户和隧道的流量统计
*
* <p>
* 主要功能：
* 1. 接收并处理节点上报的流量数据
* 2. 更新转发、用户和隧道的流量统计
@@ -31,7 +31,7 @@ import java.util.stream.Collectors;
* 7. 检查用户状态，状态不为1时暂停所有服务
* 8. 检查转发状态，状态不为1时暂停对应转发
* 9. 检查用户隧道权限状态，状态不为1时暂停对应转发
*
* <p>
* 并发安全解决方案：
* 1. 使用UpdateWrapper进行数据库层面的原子更新操作，避免读取-修改-写入的竞态条件
* 2. 使用synchronized锁确保同一用户/隧道的流量更新串行执行
@@ -60,10 +60,12 @@ public class FlowController extends BaseController {
public String test() {
return "test";
}
/**
* 处理流量数据上报
*
* @param flowDataList 流量数据列表
* @param secret 节点密钥
* @param secret 节点密钥
* @return 处理结果
*/
@RequestMapping("/upload")
@@ -102,24 +104,34 @@ public class FlowController extends BaseController {
// 6. 获取流量计费类型
int flowType = getFlowType(forward);
// 7. 更新流量统计：转发存在就更新转发流量
// 7. 先更新所有流量统计 - 确保流量数据的一致性
// 7.1 更新转发流量
if (forward != null) {
updateForwardFlow(forwardId, flowStats);
}
// 8. 用户存在就更新用户流量和进行用户相关检查
// 7.2 更新用户流量
if (user != null) {
updateUserFlow(userId, flowStats, flowType);
checkUserRelatedLimits(user, userTunnelId, forward);
}
// 9. 隧道权限存在就更新隧道权限流量和进行隧道相关检查
// 7.3 更新隧道权限流量
if (userTunnel != null) {
updateUserTunnelFlow(userTunnelId, flowStats, flowType, forwardId, userId);
checkUserTunnelRelatedLimits(userTunnel, forwardId, userId, userTunnelId, forward);
updateUserTunnelFlow(userTunnelId, flowStats);
}
// 10. 转发存在就进行转发状态检查
// 8. 流量更新完成后，再进行各种检查和服务暂停操作
// 8.1 用户相关检查
if (user != null) {
checkUserRelatedLimits(user, userTunnelId);
}
// 8.2 隧道权限相关检查
if (userTunnel != null) {
checkUserTunnelRelatedLimits(userTunnel, forwardId, userId, userTunnelId, forward, flowType);
}
// 8.3 转发状态检查
if (forward != null) {
checkForwardStatus(forward, userId, userTunnelId);
}
@@ -135,15 +147,6 @@ public class FlowController extends BaseController {
return nodeCount > 0;
}
/**
* 过滤有效的流量数据
*/
private List<FlowDto> filterValidFlowData(List<FlowDto> flowDataList) {
return flowDataList.stream()
.filter(flow -> flow.getU() != null && flow.getD() != null)
.filter(flow -> flow.getU() > 0 && flow.getD() > 0)
.collect(Collectors.toList());
}
/**
* 解析服务名称获取ID信息
@@ -158,12 +161,12 @@ public class FlowController extends BaseController {
private FlowStatistics calculateTotalFlow(List<FlowDto> validFlowData) {
long totalUpload = 0L;
long totalDownload = 0L;
for (FlowDto flow : validFlowData) {
totalUpload += flow.getU();
totalDownload += flow.getD();
}
return new FlowStatistics(totalUpload, totalDownload);
}
@@ -172,38 +175,38 @@ public class FlowController extends BaseController {
*/
private int getFlowType(Forward forward) {
int defaultFlowType = FLOW_TYPE_BIDIRECTIONAL;
if (forward != null) {
Tunnel tunnel = tunnelService.getById(forward.getTunnelId());
if (tunnel != null) {
return tunnel.getFlow();
}
}
return defaultFlowType;
}
/**
* 更新转发流量统计 - 使用原子操作避免并发问题
*/
private void updateForwardFlow(String forwardId, FlowStatistics flowStats) {
private boolean updateForwardFlow(String forwardId, FlowStatistics flowStats) {
UpdateWrapper<Forward> updateWrapper = new UpdateWrapper<>();
updateWrapper.eq("id", forwardId);
updateWrapper.setSql("in_flow = in_flow + " + flowStats.getDownload());
updateWrapper.setSql("out_flow = out_flow + " + flowStats.getUpload());
forwardService.update(null, updateWrapper);
return forwardService.update(null, updateWrapper);
}
/**
* 更新用户流量统计 - 使用原子操作避免并发问题
*/
private void updateUserFlow(String userId, FlowStatistics flowStats, int flowType) {
private boolean updateUserFlow(String userId, FlowStatistics flowStats, int flowType) {
// 对相同用户的流量更新进行同步，避免并发覆盖
synchronized (getUserLock(userId)) {
UpdateWrapper<User> updateWrapper = new UpdateWrapper<>();
updateWrapper.eq("id", userId);
// 使用SQL的原子更新操作，避免读取-修改-写入的并发问题
if (flowType == FLOW_TYPE_BIDIRECTIONAL) {
// 双向计费：同时更新上传和下载流量
@@ -213,18 +216,17 @@ public class FlowController extends BaseController {
// 仅上传计费：只更新上传流量
updateWrapper.setSql("out_flow = out_flow + " + flowStats.getUpload());
}
userService.update(null, updateWrapper);
return userService.update(null, updateWrapper);
}
}
/**
* 更新用户隧道流量统计并检查限制 - 优化版本，避免重复查询
* 更新用户隧道流量统计 - 优化版本，仅负责流量更新
*/
private void updateUserTunnelFlow(String userTunnelId, FlowStatistics flowStats,
int flowType, String forwardId, String userId) {
private boolean updateUserTunnelFlow(String userTunnelId, FlowStatistics flowStats) {
if (Objects.equals(userTunnelId, DEFAULT_USER_TUNNEL_ID)) {
return;
return true; // 默认隧道不需要更新，返回成功
}
// 对相同用户隧道的流量更新进行同步，避免并发覆盖
@@ -233,31 +235,22 @@ public class FlowController extends BaseController {
updateWrapper.eq("id", userTunnelId);
updateWrapper.setSql("in_flow = in_flow + " + flowStats.getDownload());
updateWrapper.setSql("out_flow = out_flow + " + flowStats.getUpload());
boolean updateSuccess = userTunnelService.update(null, updateWrapper);
if (!updateSuccess) {
return; // 更新失败，可能记录不存在
}
}
// 重新获取最新的流量数据进行限制检查
UserTunnel updatedUserTunnel = userTunnelService.getById(userTunnelId);
if (updatedUserTunnel != null) {
checkUserTunnelFlowLimit(updatedUserTunnel, flowType, forwardId, userId, userTunnelId);
return userTunnelService.update(null, updateWrapper);
}
}
/**
* 检查用户隧道流量限制 - 优化版本，使用传入的UserTunnel实体
*/
private void checkUserTunnelFlowLimit(UserTunnel userTunnel, int flowType,
String forwardId, String userId, String userTunnelId) {
long currentFlow = (flowType == FLOW_TYPE_UPLOAD_ONLY) ?
userTunnel.getOutFlow() :
userTunnel.getInFlow() + userTunnel.getOutFlow();
private void checkUserTunnelFlowLimit(UserTunnel userTunnel, int flowType,
String forwardId, String userId, String userTunnelId) {
long currentFlow = (flowType == FLOW_TYPE_UPLOAD_ONLY) ?
userTunnel.getOutFlow() :
userTunnel.getInFlow() + userTunnel.getOutFlow();
long flowLimit = userTunnel.getFlow() * BYTES_TO_GB;
if (flowLimit < currentFlow) {
pauseServiceDueToTunnelLimit(userTunnel.getTunnelId(), forwardId, userId, userTunnelId);
}
@@ -266,15 +259,15 @@ public class FlowController extends BaseController {
/**
* 因隧道流量超限暂停服务
*/
private void pauseServiceDueToTunnelLimit(Integer tunnelId, String forwardId,
String userId, String userTunnelId) {
private void pauseServiceDueToTunnelLimit(Integer tunnelId, String forwardId,
String userId, String userTunnelId) {
Tunnel tunnel = tunnelService.getById(tunnelId);
if (tunnel != null) {
Node node = nodeService.getNodeById(tunnel.getInNodeId());
if (node != null) {
String serviceName = buildServiceName(forwardId, userId, userTunnelId);
GostUtil.PauseService(node.getIp() + ":" + node.getPort(), serviceName, node.getSecret());
// 隧道转发需要同时暂停远端服务
if (tunnel.getType() == 2) { // TUNNEL_TYPE_TUNNEL_FORWARD
Node outNode = nodeService.getNodeById(tunnel.getOutNodeId());
@@ -296,15 +289,15 @@ public class FlowController extends BaseController {
/**
* 因隧道权限到期暂停服务
*/
private void pauseServiceDueToTunnelExpiration(Integer tunnelId, String forwardId,
String userId, String userTunnelId) {
private void pauseServiceDueToTunnelExpiration(Integer tunnelId, String forwardId,
String userId, String userTunnelId) {
Tunnel tunnel = tunnelService.getById(tunnelId);
if (tunnel != null) {
Node node = nodeService.getNodeById(tunnel.getInNodeId());
if (node != null) {
String serviceName = buildServiceName(forwardId, userId, userTunnelId);
GostUtil.PauseService(node.getIp() + ":" + node.getPort(), serviceName, node.getSecret());
// 隧道转发需要同时暂停远端服务
if (tunnel.getType() == 2) { // TUNNEL_TYPE_TUNNEL_FORWARD
Node outNode = nodeService.getNodeById(tunnel.getOutNodeId());
@@ -326,39 +319,54 @@ public class FlowController extends BaseController {
/**
* 检查用户相关的所有限制 - 用户存在时统一处理
*/
private void checkUserRelatedLimits(User user, String userTunnelId, Forward forward) {
private void checkUserRelatedLimits(User user, String userTunnelId) {
// 重新查询用户以获取最新的流量数据
User updatedUser = userService.getById(user.getId());
if (updatedUser == null) {
return;
}
// 检查用户总流量限制
long userFlowLimit = user.getFlow() * BYTES_TO_GB;
long userCurrentFlow = user.getInFlow() + user.getOutFlow();
long userFlowLimit = updatedUser.getFlow() * BYTES_TO_GB;
long userCurrentFlow = updatedUser.getInFlow() + updatedUser.getOutFlow();
if (userFlowLimit < userCurrentFlow) {
pauseAllUserServices(user.getId().toString(), userTunnelId);
pauseAllUserServices(updatedUser.getId().toString(), userTunnelId);
return; // 用户流量超限，直接返回，不需要再检查其他项
}
// 检查用户到期时间
if (user.getExpTime() != null && user.getExpTime() <= System.currentTimeMillis()) {
pauseAllUserServices(user.getId().toString(), userTunnelId);
if (updatedUser.getExpTime() != null && updatedUser.getExpTime() <= System.currentTimeMillis()) {
pauseAllUserServices(updatedUser.getId().toString(), userTunnelId);
return; // 用户到期，直接返回
}
// 检查用户状态
if (user.getStatus() != 1) {
pauseAllUserServices(user.getId().toString(), userTunnelId);
if (updatedUser.getStatus() != 1) {
pauseAllUserServices(updatedUser.getId().toString(), userTunnelId);
}
}
/**
* 检查用户隧道权限相关的所有限制 - 隧道权限存在时统一处理
*/
private void checkUserTunnelRelatedLimits(UserTunnel userTunnel, String forwardId, String userId, String userTunnelId, Forward forward) {
private void checkUserTunnelRelatedLimits(UserTunnel userTunnel, String forwardId, String userId, String userTunnelId, Forward forward, int flowType) {
// 重新查询用户隧道权限以获取最新的流量数据
UserTunnel updatedUserTunnel = userTunnelService.getById(userTunnel.getId());
if (updatedUserTunnel == null) {
return;
}
// 检查隧道权限流量限制
checkUserTunnelFlowLimit(updatedUserTunnel, flowType, forwardId, userId, userTunnelId);
// 检查隧道权限到期时间
if (userTunnel.getExpTime() != null && userTunnel.getExpTime() <= System.currentTimeMillis()) {
pauseServiceDueToTunnelExpiration(userTunnel.getTunnelId(), forwardId, userId, userTunnelId);
if (updatedUserTunnel.getExpTime() != null && updatedUserTunnel.getExpTime() <= System.currentTimeMillis()) {
pauseServiceDueToTunnelExpiration(updatedUserTunnel.getTunnelId(), forwardId, userId, userTunnelId);
return; // 隧道权限到期，直接返回
}
// 检查用户隧道权限状态
if (userTunnel.getStatus() != 1) {
if (updatedUserTunnel.getStatus() != 1) {
if (forward != null) {
pauseSpecificForward(forward, userId, userTunnelId);
}
@@ -385,7 +393,7 @@ public class FlowController extends BaseController {
if (node != null) {
String serviceName = buildServiceName(String.valueOf(forward.getId()), userId, userTunnelId);
GostUtil.PauseService(node.getIp() + ":" + node.getPort(), serviceName, node.getSecret());
// 隧道转发需要同时暂停远端服务
if (tunnel.getType() == 2) { // TUNNEL_TYPE_TUNNEL_FORWARD
Node outNode = nodeService.getNodeById(tunnel.getOutNodeId());
@@ -395,7 +403,7 @@ public class FlowController extends BaseController {
}
}
}
// 更新转发状态为暂停
forward.setStatus(0);
forwardService.updateById(forward);
@@ -406,7 +414,7 @@ public class FlowController extends BaseController {
*/
private void pauseAllUserServices(String userId, String userTunnelId) {
List<Forward> userForwards = forwardService.list(new QueryWrapper<Forward>().eq("user_id", userId));
for (Forward forward : userForwards) {
Tunnel tunnel = tunnelService.getById(forward.getTunnelId());
if (tunnel != null) {
@@ -416,7 +424,7 @@ public class FlowController extends BaseController {
String actualUserTunnelId = findActualUserTunnelId(userId, forward.getTunnelId().toString());
String serviceName = buildServiceName(String.valueOf(forward.getId()), userId, actualUserTunnelId);
GostUtil.PauseService(node.getIp() + ":" + node.getPort(), serviceName, node.getSecret());
// 隧道转发需要同时暂停远端服务
if (tunnel.getType() == 2) { // TUNNEL_TYPE_TUNNEL_FORWARD
Node outNode = nodeService.getNodeById(tunnel.getOutNodeId());
@@ -426,7 +434,7 @@ public class FlowController extends BaseController {
}
}
}
forward.setStatus(0);
forwardService.updateById(forward);
}
@@ -437,11 +445,11 @@ public class FlowController extends BaseController {
*/
private String findActualUserTunnelId(String userId, String tunnelId) {
UserTunnel userTunnel = userTunnelService.getOne(
new QueryWrapper<UserTunnel>()
.eq("user_id", userId)
.eq("tunnel_id", tunnelId)
new QueryWrapper<UserTunnel>()
.eq("user_id", userId)
.eq("tunnel_id", tunnelId)
);
return userTunnel != null ? String.valueOf(userTunnel.getId()) : DEFAULT_USER_TUNNEL_ID;
}
springboot-backend/src/main/java/com/admin/service/impl/UserServiceImpl.java
+35 -6
View File
@@ -89,10 +89,15 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
private static final String ERROR_PASSWORD_NOT_MATCH = "新密码和确认密码不匹配";
private static final String SUCCESS_PASSWORD_UPDATE = "密码修改成功";
/** 默认账号密码 */
private static final String DEFAULT_USERNAME = "admin_user";
private static final String DEFAULT_PASSWORD = "admin_user";
/** 登录响应字段名 */
private static final String LOGIN_TOKEN_FIELD = "token";
private static final String LOGIN_NAME_FIELD = "name";
private static final String LOGIN_ROLE_ID_FIELD = "role_id";
private static final String LOGIN_REQUIRE_PASSWORD_CHANGE_FIELD = "requirePasswordChange";
// ========== 依赖注入 ==========
@@ -141,10 +146,14 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
User user = validationResult.getUser();
String token = JwtUtil.generateToken(user);
// 3. 检查是否使用默认账号密码
boolean requirePasswordChange = isDefaultCredentials(loginDto.getUsername(), loginDto.getPassword());
return R.ok(MapUtil.builder()
.put(LOGIN_TOKEN_FIELD, token)
.put(LOGIN_NAME_FIELD, user.getName())
.put(LOGIN_ROLE_ID_FIELD, user.getRoleId())
.put(LOGIN_REQUIRE_PASSWORD_CHANGE_FIELD, requirePasswordChange)
.build());
}
@@ -285,10 +294,10 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
}
/**
* 修改密码
* 验证当前密码、新密码确认、更新用户密码
* 修改账号密码
* 验证当前密码、新密码确认、用户名唯一性、更新用户账号密码
*
* @param changePasswordDto 修改密码数据传输对象
* @param changePasswordDto 修改账号密码数据传输对象
* @return 修改结果响应
*/
@Override
@@ -312,18 +321,27 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
return R.err(ERROR_CURRENT_PASSWORD_WRONG);
}
// 4. 更新密码
// 4. 验证新用户名唯一性（如果与当前用户名不同）
if (!user.getUser().equals(changePasswordDto.getNewUsername())) {
R usernameValidationResult = validateUsernameUniqueness(changePasswordDto.getNewUsername(), user.getId());
if (usernameValidationResult.getCode() != 0) {
return usernameValidationResult;
}
}
// 5. 更新用户名和密码
User updateUser = new User();
updateUser.setId(user.getId());
updateUser.setUser(changePasswordDto.getNewUsername());
updateUser.setPwd(Md5Util.md5(changePasswordDto.getNewPassword()));
updateUser.setUpdatedTime(System.currentTimeMillis());
boolean result = this.updateById(updateUser);
return result ? R.ok(SUCCESS_PASSWORD_UPDATE) : R.err(ERROR_UPDATE_FAILED);
return result ? R.ok("账号密码修改成功") : R.err(ERROR_UPDATE_FAILED);
} catch (Exception e) {
e.printStackTrace();
return R.err("修改密码时发生错误：" + e.getMessage());
return R.err("修改账号密码时发生错误：" + e.getMessage());
}
}
@@ -352,6 +370,17 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
return LoginValidationResult.success(user);
}
/**
* 检查是否使用默认账号密码
*
* @param username 用户名
* @param password 密码
* @return 是否是默认凭据
*/
private boolean isDefaultCredentials(String username, String password) {
return DEFAULT_USERNAME.equals(username) && DEFAULT_PASSWORD.equals(password);
}
/**
* 验证用户名唯一性
*
vue-frontend/src/router/index.js
+3 -1
View File
@@ -5,6 +5,7 @@ import VueRouter from 'vue-router';
import Home from "@/views/Home.vue";
import Login from "@/views/Login.vue";
import ChangeAccountPassword from "@/views/ChangePassword.vue";
import Index from "@/views/Index";
import User from "@/views/User";
import Node from "@/views/node";
@@ -19,6 +20,7 @@ Vue.use(VueRouter);
const routes = [
{path: '/', redirect: '/login'},
{path: '/login', component: Login},
{path: '/change-password', component: ChangeAccountPassword},
{
path: '/home', component: Home, redirect: '/index', children: [
{path: '/index', component: Index},
@@ -38,7 +40,7 @@ const router = new VueRouter({
})
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next();
if (to.path === '/login' || to.path === '/change-password') return next();
const tokenStr = localStorage.getItem('token')
if (!tokenStr) {
return next('/login')
vue-frontend/src/views/ChangePassword.vue
+414
View File
@@ -0,0 +1,414 @@
<template>
<div class="change-password-container">
<!-- 背景装饰 -->
<div class="bg-decoration">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
<!-- 主要内容区域 -->
<div class="change-password-wrapper">
<!-- 修改密码表单 -->
<div class="change-password-form-container">
<div class="change-password-form">
<div class="form-header">
<div class="warning-icon">
<i class="el-icon-warning" style="font-size: 50px; color: #E6A23C;"></i>
</div>
<h2 class="form-title">安全提醒</h2>
<p class="form-subtitle">检测到您使用的是默认账号密码，为了您的账户安全，请立即修改账号和密码</p>
</div>
<el-form
:model="passwordForm"
:rules="rules"
ref="passwordForm"
@keyup.enter.native="handleSubmit"
class="change-password-form-content"
label-width="100px"
>
<el-form-item label="新用户名" prop="newUsername">
<div class="input-wrapper">
<el-input
v-model="passwordForm.newUsername"
placeholder="请输入新用户名（至少3位）"
clearable
size="large"
class="custom-input"
></el-input>
</div>
</el-form-item>
<el-form-item label="当前密码" prop="currentPassword">
<div class="input-wrapper">
<el-input
v-model="passwordForm.currentPassword"
type="password"
placeholder="请输入当前密码"
show-password
size="large"
class="custom-input"
></el-input>
</div>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<div class="input-wrapper">
<el-input
v-model="passwordForm.newPassword"
type="password"
placeholder="请输入新密码（至少6位）"
show-password
size="large"
class="custom-input"
></el-input>
</div>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<div class="input-wrapper">
<el-input
v-model="passwordForm.confirmPassword"
type="password"
placeholder="请再次输入新密码"
show-password
size="large"
class="custom-input"
></el-input>
</div>
</el-form-item>
<el-form-item class="change-password-btn-item">
<el-button
type="primary"
:loading="loading"
@click="handleSubmit"
class="change-password-btn"
size="large"
>
<span v-if="!loading">立即修改账号密码</span>
<span v-else>修改中...</span>
</el-button>
</el-form-item>
</el-form>
<div class="form-footer">
<p class="warning-text">注意：修改账号密码后需要重新登录</p>
<p class="copyright">© 2024 管理系统. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { updatePassword } from "@/api";
export default {
name: 'ChangeAccountPassword',
data() {
return {
passwordForm: {
newUsername: '',
currentPassword: '',
newPassword: '',
confirmPassword: ''
},
rules: {
newUsername: [
{ required: true, message: '请输入新用户名', trigger: 'blur' },
{ min: 3, message: '用户名长度至少3位', trigger: 'blur' },
{ max: 20, message: '用户名长度不能超过20位', trigger: 'blur' }
],
currentPassword: [
{ required: true, message: '请输入当前密码', trigger: 'blur' },
{ min: 1, message: '密码不能为空', trigger: 'blur' }
],
newPassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 6, message: '新密码长度不能少于6位', trigger: 'blur' },
{ max: 20, message: '新密码长度不能超过20位', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
{ validator: this.validateConfirmPassword, trigger: 'blur' }
]
},
loading: false
};
},
methods: {
// 确认密码验证器
validateConfirmPassword(rule, value, callback) {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.passwordForm.newPassword) {
callback(new Error('两次输入密码不一致'));
} else {
callback();
}
},
// 提交修改密码
handleSubmit() {
this.$refs.passwordForm.validate(async (valid) => {
if (valid) {
try {
this.loading = true;
// 调用修改密码接口
const response = await updatePassword(this.passwordForm);
if (response.code === 0) {
this.$message.success(response.msg || '账号密码修改成功');
// 提示用户重新登录
this.$confirm('账号密码修改成功，请重新登录', '提示', {
confirmButtonText: '确定',
type: 'success',
showCancelButton: false,
closeOnClickModal: false,
closeOnPressEscape: false
}).then(() => {
this.logout();
}).catch(() => {
this.logout();
});
} else {
this.$message.error(response.msg || '账号密码修改失败');
}
} catch (error) {
this.$message.error('修改账号密码时发生错误');
console.error('修改账号密码错误:', error);
} finally {
this.loading = false;
}
}
});
},
// 退出登录
logout() {
localStorage.clear();
this.$router.push("/login");
}
}
};
</script>
<style scoped>
.change-password-container {
height: 100vh;
width: 100vw;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #E6A23C 0%, #F56C6C 100%);
display: flex;
align-items: center;
justify-content: center;
}
/* 背景装饰 */
.bg-decoration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: float 6s ease-in-out infinite;
}
.circle-1 {
width: 200px;
height: 200px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.circle-2 {
width: 150px;
height: 150px;
top: 60%;
right: 15%;
animation-delay: 2s;
}
.circle-3 {
width: 100px;
height: 100px;
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
/* 主要内容区域 */
.change-password-wrapper {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 600px;
}
/* 修改密码表单 */
.change-password-form-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.change-password-form {
width: 100%;
max-width: 500px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 40px;
backdrop-filter: blur(10px);
}
.form-header {
text-align: center;
margin-bottom: 40px;
}
.warning-icon {
margin-bottom: 15px;
}
.form-title {
font-size: 2rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.form-subtitle {
color: #6b7280;
font-size: 1rem;
margin: 0;
line-height: 1.5;
}
.change-password-form-content {
margin-bottom: 30px;
}
.input-wrapper {
position: relative;
margin-bottom: 20px;
}
/* 自定义输入框样式 */
.custom-input >>> .el-input__inner {
height: 50px;
border-radius: 12px;
border: 2px solid #e5e7eb;
font-size: 16px;
padding-left: 15px;
transition: all 0.3s ease;
background: #f9fafb;
}
.custom-input >>> .el-input__inner:focus {
border-color: #E6A23C;
background: white;
box-shadow: 0 0 0 3px rgba(230, 162, 60, 0.1);
}
.custom-input >>> .el-input__suffix {
right: 15px;
}
/* 修改密码按钮 */
.change-password-btn-item {
margin-bottom: 0;
}
.change-password-btn {
width: 100%;
height: 50px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
background: linear-gradient(135deg, #E6A23C 0%, #F56C6C 100%);
border: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(230, 162, 60, 0.4);
}
.change-password-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(230, 162, 60, 0.6);
}
.change-password-btn:active {
transform: translateY(0);
}
/* 表单底部 */
.form-footer {
text-align: center;
margin-top: 30px;
}
.warning-text {
color: #F56C6C;
font-size: 0.875rem;
margin: 0 0 10px 0;
font-weight: 600;
}
.copyright {
color: #9ca3af;
font-size: 0.875rem;
margin: 0;
}
/* 响应式设计 */
@media (max-width: 768px) {
.change-password-form-container {
padding: 20px;
}
.change-password-form {
padding: 30px 20px;
}
.form-title {
font-size: 1.5rem;
}
}
/* 表单验证错误样式 */
.change-password-form-content >>> .el-form-item__error {
font-size: 14px;
color: #ef4444;
margin-top: 5px;
}
/* 加载状态 */
.change-password-btn.is-loading {
pointer-events: none;
}
</style>
vue-frontend/src/views/Login.vue
+11
View File
@@ -104,6 +104,17 @@ export default {
login(this.loginForm).then(res=>{
this.loading = false
if (res.code !== 0) return this.$message.error(res.msg)
// 检查是否需要强制修改密码
if (res.data.requirePasswordChange) {
localStorage.setItem('token', res.data.token);
localStorage.setItem("role_id", res.data.role_id)
localStorage.setItem("name", res.data.name)
this.$message.warning('检测到您使用的是默认账号密码，为了安全请立即修改');
this.$router.push("/change-password");
return;
}
localStorage.setItem('token', res.data.token);
localStorage.setItem("e", '/index')
localStorage.setItem("role_id", res.data.role_id)