feat: 添加XSS防护工具函数并优化多个功能模块
refactor(前端): 重构登录页面和用户状态管理逻辑 fix(后端): 修复用户密码更新逻辑和错误提示 feat(后端): 实现分页搜索功能并优化文件删除逻辑 perf(前端): 优化笔记编辑器自动保存和状态提示 fix(后端): 增强图片上传安全验证 style(前端): 调整笔记预览页面按钮权限控制 chore: 更新生产环境配置和测试数据库依赖 feat(前端): 添加虚拟列表组件优化性能 fix(前端): 修复笔记编辑器返回逻辑和状态保存 refactor(前端): 优化axios拦截器错误处理逻辑 docs: 更新方法注释和参数说明
This commit is contained in:
@@ -67,6 +67,13 @@
|
||||
<artifactId>spring-boot-starter-test</artifactId>
|
||||
</dependency>
|
||||
|
||||
<!-- H2 数据库(测试用) -->
|
||||
<dependency>
|
||||
<groupId>com.h2database</groupId>
|
||||
<artifactId>h2</artifactId>
|
||||
<scope>test</scope>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-aop</artifactId>
|
||||
|
||||
@@ -93,8 +93,13 @@ public class MarkdownController {
|
||||
|
||||
@Operation(summary = "根据标题模糊搜索")
|
||||
@GetMapping("/search")
|
||||
public R<List<MarkdownFile>> searchByTitle(@RequestParam String keyword) {
|
||||
List<MarkdownFile> files = markdownFileService.searchByTitle(keyword);
|
||||
public R<List<MarkdownFile>> searchByTitle(
|
||||
@RequestParam String keyword,
|
||||
@RequestParam(defaultValue = "1") int page,
|
||||
@RequestParam(defaultValue = "20") int pageSize) {
|
||||
if (page < 1) page = 1;
|
||||
if (pageSize < 1 || pageSize > 100) pageSize = 20;
|
||||
List<MarkdownFile> files = markdownFileService.searchByTitle(keyword, page, pageSize);
|
||||
return R.success(files);
|
||||
}
|
||||
|
||||
|
||||
@@ -49,9 +49,11 @@ public interface MarkdownFileService extends IService<MarkdownFile> {
|
||||
/**
|
||||
* 根据标题模糊搜索
|
||||
* @param keyword 关键词
|
||||
* @param page 页码(从1开始)
|
||||
* @param pageSize 每页数量
|
||||
* @return 文件列表
|
||||
*/
|
||||
List<MarkdownFile> searchByTitle(String keyword);
|
||||
List<MarkdownFile> searchByTitle(String keyword, int page, int pageSize);
|
||||
|
||||
/**
|
||||
* 更新Markdown文件标题
|
||||
|
||||
@@ -21,8 +21,11 @@ import java.io.InputStream;
|
||||
import java.nio.file.Files;
|
||||
import java.nio.file.Path;
|
||||
import java.nio.file.Paths;
|
||||
import java.util.Arrays;
|
||||
import java.util.Date;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Set;
|
||||
import java.util.UUID;
|
||||
|
||||
@@ -38,6 +41,15 @@ public class ImageServiceImpl
|
||||
|
||||
private static final long MAX_FILE_SIZE = 10 * 1024 * 1024;
|
||||
|
||||
private static final Map<String, byte[]> FILE_SIGNATURES = Map.ofEntries(
|
||||
Map.entry("jpg", new byte[]{(byte)0xFF, (byte)0xD8, (byte)0xFF}),
|
||||
Map.entry("jpeg", new byte[]{(byte)0xFF, (byte)0xD8, (byte)0xFF}),
|
||||
Map.entry("png", new byte[]{(byte)0x89, 0x50, 0x4E, 0x47}),
|
||||
Map.entry("gif", new byte[]{0x47, 0x49, 0x46}),
|
||||
Map.entry("bmp", new byte[]{0x42, 0x4D}),
|
||||
Map.entry("webp", new byte[]{0x52, 0x49, 0x46, 0x46})
|
||||
);
|
||||
|
||||
@Value("${file.upload-dir}")
|
||||
private String uploadDir;
|
||||
@Resource
|
||||
@@ -73,6 +85,12 @@ public class ImageServiceImpl
|
||||
throw new BusinessException("文件内容类型无效");
|
||||
}
|
||||
|
||||
// 验证文件头
|
||||
String extWithoutDot = extension.substring(1).toLowerCase();
|
||||
if (!validateFileSignature(file, extWithoutDot)) {
|
||||
throw new BusinessException("文件内容与扩展名不匹配,可能是伪装的恶意文件");
|
||||
}
|
||||
|
||||
Path uploadPath = Paths.get(uploadDir);
|
||||
if (!Files.exists(uploadPath)) {
|
||||
Files.createDirectories(uploadPath);
|
||||
@@ -114,6 +132,18 @@ public class ImageServiceImpl
|
||||
return image;
|
||||
}
|
||||
|
||||
private boolean validateFileSignature(MultipartFile file, String extension) throws IOException {
|
||||
byte[] signature = FILE_SIGNATURES.get(extension);
|
||||
if (signature == null) return true;
|
||||
|
||||
byte[] fileHeader = new byte[Math.max(4, signature.length)];
|
||||
try (InputStream is = file.getInputStream()) {
|
||||
int read = is.read(fileHeader);
|
||||
if (read < signature.length) return false;
|
||||
return Arrays.equals(Arrays.copyOf(fileHeader, signature.length), signature);
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public boolean deleteImage(Long id) {
|
||||
Image image = imageMapper.selectById(id);
|
||||
|
||||
@@ -14,6 +14,7 @@ import com.test.bijihoudaun.mapper.ImageNameMapper;
|
||||
import com.test.bijihoudaun.mapper.MarkdownFileMapper;
|
||||
import com.test.bijihoudaun.service.MarkdownFileService;
|
||||
import com.test.bijihoudaun.util.MarkdownImageExtractor;
|
||||
import com.test.bijihoudaun.util.SecurityUtil;
|
||||
import com.test.bijihoudaun.util.SnowflakeIdGenerator;
|
||||
import jakarta.annotation.Resource;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
@@ -113,10 +114,12 @@ public class MarkdownFileServiceImpl
|
||||
|
||||
@Override
|
||||
public boolean deleteMarkdownFile(Long id) {
|
||||
Long currentUserId = SecurityUtil.getCurrentUserId();
|
||||
LambdaUpdateWrapper<MarkdownFile> updateWrapper = new LambdaUpdateWrapper<>();
|
||||
updateWrapper.eq(MarkdownFile::getId, id)
|
||||
.set(MarkdownFile::getIsDeleted, 1)
|
||||
.set(MarkdownFile::getDeletedAt, new Date());
|
||||
.set(MarkdownFile::getDeletedAt, new Date())
|
||||
.set(MarkdownFile::getDeletedBy, currentUserId);
|
||||
return this.update(updateWrapper);
|
||||
}
|
||||
|
||||
@@ -131,13 +134,16 @@ public class MarkdownFileServiceImpl
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<MarkdownFile> searchByTitle(String keyword) {
|
||||
// 修复:使用 LambdaQueryWrapper 避免 SQL 注入风险
|
||||
public List<MarkdownFile> searchByTitle(String keyword, int page, int pageSize) {
|
||||
if (keyword == null || keyword.trim().isEmpty()) {
|
||||
return List.of();
|
||||
}
|
||||
int offset = (page - 1) * pageSize;
|
||||
LambdaQueryWrapper<MarkdownFile> queryWrapper = new LambdaQueryWrapper<>();
|
||||
queryWrapper.like(MarkdownFile::getTitle, keyword);
|
||||
queryWrapper.like(MarkdownFile::getTitle, keyword)
|
||||
.eq(MarkdownFile::getIsDeleted, 0)
|
||||
.orderByDesc(MarkdownFile::getUpdatedAt)
|
||||
.last("LIMIT " + offset + "," + pageSize);
|
||||
return this.list(queryWrapper);
|
||||
}
|
||||
|
||||
|
||||
@@ -111,7 +111,7 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
|
||||
if (remainingAttempts <= 0) {
|
||||
throw new BadCredentialsException("登录失败次数过多,账号已被锁定30分钟");
|
||||
}
|
||||
throw new BadCredentialsException("用户名或密码错误,还剩" + remainingAttempts + "次机会");
|
||||
throw new BadCredentialsException("登录失败,请稍后重试");
|
||||
}
|
||||
|
||||
// 登录成功,清除失败记录
|
||||
@@ -156,6 +156,11 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
|
||||
if (!PasswordUtils.verify(updatePasswordBo.getOldPassword(), user.getPassword())) {
|
||||
throw new BusinessException("旧密码不正确");
|
||||
}
|
||||
|
||||
if (PasswordUtils.verify(newPassword, user.getPassword())) {
|
||||
throw new BusinessException("新密码不能与旧密码相同");
|
||||
}
|
||||
|
||||
user.setPassword(PasswordUtils.encrypt(newPassword));
|
||||
updateById(user);
|
||||
}
|
||||
|
||||
@@ -116,4 +116,17 @@ public class SecurityUtil {
|
||||
public static boolean isAdmin() {
|
||||
return hasRole("ADMIN");
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前已认证用户的ID
|
||||
*
|
||||
* @return 当前用户的ID,如果用户未认证则返回null
|
||||
*/
|
||||
public static Long getCurrentUserId() {
|
||||
String username = getCurrentUsername();
|
||||
if (username == null) {
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,3 +54,46 @@ knife4j:
|
||||
multipart:
|
||||
max-file-size: 10MB
|
||||
max-request-size: 10MB
|
||||
|
||||
# 服务器配置
|
||||
server:
|
||||
port: 8084
|
||||
servlet:
|
||||
context-path: /
|
||||
|
||||
# 文件上传路径
|
||||
file:
|
||||
upload-dir: /data/uploads
|
||||
|
||||
# 内存保护阈值 (MB)
|
||||
memory:
|
||||
threshold: 200
|
||||
|
||||
# Snowflake ID 配置
|
||||
worker:
|
||||
id: 1
|
||||
datacenter:
|
||||
id: 1
|
||||
|
||||
# JWT 配置 - 使用环境变量
|
||||
jwt:
|
||||
secret: ${JWT_SECRET}
|
||||
expiration: 86400
|
||||
header: Authorization
|
||||
tokenHead: "Bearer "
|
||||
|
||||
# 管理员用户名
|
||||
admin:
|
||||
username: ${ADMIN_USERNAME}
|
||||
|
||||
# 日志配置 - 生产环境只记录 WARN 及以上
|
||||
logging:
|
||||
level:
|
||||
root: WARN
|
||||
com.test.bijihoudaun: INFO
|
||||
pattern:
|
||||
console: "%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n"
|
||||
file:
|
||||
name: /var/log/biji/application.log
|
||||
max-size: 100MB
|
||||
max-history: 30
|
||||
@@ -1,12 +0,0 @@
|
||||
spring:
|
||||
datasource:
|
||||
driver-class-name: org.sqlite.JDBC
|
||||
url: jdbc:sqlite:/data/mydatabase.db
|
||||
jpa:
|
||||
hibernate:
|
||||
ddl-auto: none
|
||||
show-sql: true
|
||||
properties:
|
||||
hibernate:
|
||||
format_sql: true
|
||||
dialect: org.hibernate.dialect.SQLiteDialect
|
||||
@@ -34,6 +34,7 @@
|
||||
:is-mobile="isMobile"
|
||||
:is-user-logged-in="userStore.isLoggedIn"
|
||||
:has-more-chunks="hasMoreChunks"
|
||||
:user-role="userStore.userInfo?.role || 'USER'"
|
||||
@back="selectedFile = null"
|
||||
@edit="editNote(selectedFile)"
|
||||
@delete="deleteNote(selectedFile)"
|
||||
@@ -362,14 +363,26 @@ const handleCreateNote = (payload) => {
|
||||
selectedFile.value = null; // Ensure preview is hidden
|
||||
};
|
||||
|
||||
const handleEditorBack = (data) => {
|
||||
const handleEditorBack = async (data) => {
|
||||
showEditor.value = false;
|
||||
if (data && data.id) {
|
||||
const fileWithGrouping = {
|
||||
// 重置渲染缓存
|
||||
lastRenderedKey = null;
|
||||
currentChunkIndex.value = 0;
|
||||
hasMoreChunks.value = false;
|
||||
isLoadingChunk.value = false;
|
||||
totalChunks.value = 0;
|
||||
|
||||
// 设置预览状态并加载内容
|
||||
selectedFile.value = {
|
||||
...data,
|
||||
groupingName: data.groupingName || getCategoryName(data.groupingId)
|
||||
groupingName: data.groupingName || getCategoryName(data.groupingId),
|
||||
isLoading: true,
|
||||
isRendering: false
|
||||
};
|
||||
selectedFile.value = fileWithGrouping;
|
||||
|
||||
// 加载笔记内容
|
||||
await loadNoteChunk(data.id, 0);
|
||||
} else {
|
||||
selectedFile.value = null;
|
||||
resetToHomeView();
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="请输入您的密码" show-password size="large">
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="请输入您的密码" show-password size="large" @keyup.enter="handleLogin">
|
||||
<template #prefix>
|
||||
<el-icon><Lock /></el-icon>
|
||||
</template>
|
||||
@@ -61,9 +61,8 @@ const handleLogin = async () => {
|
||||
const success = await userStore.login(loginForm.value.username, loginForm.value.password);
|
||||
if (success) {
|
||||
ElMessage.success('登录成功');
|
||||
loginForm.value.password = '';
|
||||
router.push('/home');
|
||||
} else {
|
||||
// ElMessage.error('用户名或密码错误'); // 错误已由 axios 拦截器处理
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
51
biji-qianduan/src/components/VirtualList.vue
Normal file
51
biji-qianduan/src/components/VirtualList.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
import { defineComponent, h } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VirtualList',
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
containerHeight: {
|
||||
type: Number,
|
||||
default: 600
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const visibleStart = ref(0)
|
||||
const visibleEnd = ref(Math.ceil(props.containerHeight / props.itemHeight))
|
||||
|
||||
const handleScroll = (e) => {
|
||||
const scrollTop = e.target.scrollTop
|
||||
visibleStart.value = Math.floor(scrollTop / props.itemHeight)
|
||||
visibleEnd.value = visibleStart.value + Math.ceil(props.containerHeight / props.itemHeight)
|
||||
}
|
||||
|
||||
const visibleItems = computed(() => {
|
||||
return props.items.slice(visibleStart.value, visibleEnd.value)
|
||||
})
|
||||
|
||||
return () => h('div', {
|
||||
style: { height: `${props.containerHeight}px`, overflow: 'auto' },
|
||||
onScroll: handleScroll
|
||||
}, [
|
||||
h('div', {
|
||||
style: { height: `${props.items.length * props.itemHeight}px`, position: 'relative' }
|
||||
}, visibleItems.value.map((item, idx) =>
|
||||
h('div', {
|
||||
key: visibleStart.value + idx,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: `${(visibleStart.value + idx) * props.itemHeight}px`,
|
||||
height: `${props.itemHeight}px`
|
||||
}
|
||||
}, slots.default?.({ item, index: visibleStart.value + idx }))
|
||||
))
|
||||
])
|
||||
}
|
||||
})
|
||||
@@ -5,7 +5,11 @@
|
||||
<div class="actions">
|
||||
<el-button type="primary" @click="handleBack">返回</el-button>
|
||||
<el-button type="success" @click="save">保存</el-button>
|
||||
<span class="save-status">{{ saveStatus }}</span>
|
||||
<div class="save-status">
|
||||
<el-icon v-if="saveStatus === '正在输入...'" class="is-loading saving-icon"><Loading /></el-icon>
|
||||
<el-icon v-else-if="saveStatus === '保存失败'" class="error-icon"><CircleCloseFilled /></el-icon>
|
||||
<el-icon v-else-if="saveStatus === '已保存'" class="success-icon"><CircleCheckFilled /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<div id="vditor-editor" class="vditor" />
|
||||
@@ -16,8 +20,10 @@
|
||||
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
|
||||
import Vditor from 'vditor';
|
||||
import 'vditor/dist/index.css';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Loading, CircleCloseFilled, CircleCheckFilled } from '@element-plus/icons-vue';
|
||||
import { updateMarkdown, uploadImage } from '@/api/CommonApi.js';
|
||||
import { useUserStore } from '@/stores/user';
|
||||
|
||||
const props = defineProps({
|
||||
editData: {
|
||||
@@ -37,6 +43,8 @@ const lastSavedContent = ref('');
|
||||
const isSaving = ref(false);
|
||||
// 维护当前最新的笔记数据
|
||||
const currentData = ref({ ...props.editData });
|
||||
// 保存 beforeunload 事件处理器引用
|
||||
let handleBeforeUnload = null;
|
||||
|
||||
const initVditor = () => {
|
||||
if (vditor.value) {
|
||||
@@ -63,13 +71,16 @@ const initVditor = () => {
|
||||
input: (value) => {
|
||||
if (!isInitialized.value) return;
|
||||
|
||||
// 只有在内容真正改变时才启动定时器
|
||||
if (value !== lastSavedContent.value) {
|
||||
clearTimeout(saveTimeout.value);
|
||||
saveStatus.value = '正在输入...';
|
||||
saveTimeout.value = setTimeout(() => {
|
||||
if (!isSaving.value && value !== lastSavedContent.value) {
|
||||
save(value);
|
||||
}
|
||||
}, 3000);
|
||||
}, 5000);
|
||||
}
|
||||
},
|
||||
upload: {
|
||||
accept: 'image/*',
|
||||
@@ -104,7 +115,7 @@ const save = async (value) => {
|
||||
return;
|
||||
}
|
||||
|
||||
clearTimeout(saveTimeout);
|
||||
clearTimeout(saveTimeout.value);
|
||||
const content = typeof value === 'string' ? value : vditor.value?.getValue() || '';
|
||||
|
||||
if (content === lastSavedContent.value && currentId.value) {
|
||||
@@ -131,8 +142,6 @@ const save = async (value) => {
|
||||
isPrivate: currentData.value.isPrivate !== undefined ? currentData.value.isPrivate : props.editData.isPrivate
|
||||
};
|
||||
|
||||
|
||||
|
||||
const response = await updateMarkdown(payload);
|
||||
|
||||
if (response && response.id) {
|
||||
@@ -153,6 +162,13 @@ const save = async (value) => {
|
||||
currentData.value = updatedFile;
|
||||
emit('update:editData', updatedFile);
|
||||
saveStatus.value = '已保存';
|
||||
|
||||
// 2秒后清除成功状态
|
||||
setTimeout(() => {
|
||||
if (saveStatus.value === '已保存') {
|
||||
saveStatus.value = '';
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
} catch (error) {
|
||||
saveStatus.value = '保存失败';
|
||||
@@ -164,8 +180,15 @@ const save = async (value) => {
|
||||
};
|
||||
|
||||
const handleBack = async () => {
|
||||
// 清除定时器,防止返回后继续保存
|
||||
clearTimeout(saveTimeout.value);
|
||||
|
||||
const content = vditor.value ? vditor.value.getValue() : '';
|
||||
if (content !== lastSavedContent.value && !isSaving.value) {
|
||||
const hasChanges = content !== lastSavedContent.value;
|
||||
|
||||
// ADMIN 角色自动保存未保存的内容
|
||||
const userStore = useUserStore();
|
||||
if (hasChanges && !isSaving.value && userStore.userInfo?.role === 'ADMIN') {
|
||||
await save(content);
|
||||
}
|
||||
|
||||
@@ -173,11 +196,16 @@ const handleBack = async () => {
|
||||
const groupingId = currentData.value.groupingId || props.editData.groupingId;
|
||||
const groupingName = currentData.value.groupingName || props.editData.groupingName;
|
||||
|
||||
// 修复:普通用户有未保存内容时,返回最后保存的内容
|
||||
const finalContent = (hasChanges && userStore.userInfo?.role !== 'ADMIN')
|
||||
? lastSavedContent.value
|
||||
: content;
|
||||
|
||||
const returnData = {
|
||||
...currentData.value,
|
||||
...props.editData,
|
||||
id: currentId.value ? String(currentId.value) : (currentData.value.id ? String(currentData.value.id) : null),
|
||||
content: content,
|
||||
content: finalContent,
|
||||
groupingId: groupingId ? String(groupingId) : null,
|
||||
groupingName: groupingName
|
||||
};
|
||||
@@ -187,18 +215,36 @@ const handleBack = async () => {
|
||||
|
||||
onMounted(() => {
|
||||
initVditor();
|
||||
|
||||
// 页面刷新时提示用户保存
|
||||
handleBeforeUnload = (e) => {
|
||||
const content = vditor.value ? vditor.value.getValue() : '';
|
||||
if (content !== lastSavedContent.value && !isSaving.value) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '您有未保存的内容,确定要离开吗?';
|
||||
return '您有未保存的内容,确定要离开吗?';
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('beforeunload', handleBeforeUnload);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 修复:确保清理定时器
|
||||
// 清理定时器
|
||||
if (saveTimeout.value) {
|
||||
clearTimeout(saveTimeout.value);
|
||||
saveTimeout.value = null;
|
||||
}
|
||||
// 清理编辑器
|
||||
if (vditor.value) {
|
||||
vditor.value.destroy();
|
||||
vditor.value = null;
|
||||
}
|
||||
// 移除页面刷新提示
|
||||
if (handleBeforeUnload) {
|
||||
window.removeEventListener('beforeunload', handleBeforeUnload);
|
||||
handleBeforeUnload = null;
|
||||
}
|
||||
currentId.value = null;
|
||||
isInitialized.value = false;
|
||||
});
|
||||
@@ -236,9 +282,46 @@ watch(() => props.editData, (newVal, oldVal) => {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.actions .save-status {
|
||||
margin-left: 10px;
|
||||
color: #909399;
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.save-status {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.saving-icon {
|
||||
font-size: 20px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 20px;
|
||||
color: #67c23a;
|
||||
animation: fadeOut 2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 20px;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vditor {
|
||||
|
||||
@@ -11,16 +11,16 @@
|
||||
<el-icon v-if="isMobile"><Back /></el-icon>
|
||||
<span v-else>返回</span>
|
||||
</el-button>
|
||||
<el-button v-if="isUserLoggedIn && !isMobile" type="warning" @click="$emit('show-move-note-dialog')">移动</el-button>
|
||||
<el-button v-if="isUserLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="primary" @click="$emit('edit')">
|
||||
<el-button v-if="isUserLoggedIn && !isMobile" type="warning" :disabled="userRole !== 'ADMIN'" @click="$emit('show-move-note-dialog')">移动</el-button>
|
||||
<el-button v-if="isUserLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="primary" :disabled="userRole !== 'ADMIN'" @click="$emit('edit')">
|
||||
<el-icon v-if="isMobile"><Edit /></el-icon>
|
||||
<span v-else>编辑</span>
|
||||
</el-button>
|
||||
<el-button v-if="isUserLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="danger" @click="$emit('delete')">
|
||||
<el-button v-if="isUserLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="danger" :disabled="userRole !== 'ADMIN'" @click="$emit('delete')">
|
||||
<el-icon v-if="isMobile"><Delete /></el-icon>
|
||||
<span v-else>删除</span>
|
||||
</el-button>
|
||||
<el-button v-if="isUserLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="info" @click="$emit('show-privacy-dialog')">
|
||||
<el-button v-if="isUserLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="info" :disabled="userRole !== 'ADMIN'" @click="$emit('show-privacy-dialog')">
|
||||
<el-icon v-if="isMobile"><Lock /></el-icon>
|
||||
<span v-else>{{ file.isPrivate === 1 ? '设为公开' : '设为私密' }}</span>
|
||||
</el-button>
|
||||
@@ -72,6 +72,10 @@ const props = defineProps({
|
||||
hasMoreChunks: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userRole: {
|
||||
type: String,
|
||||
default: 'USER'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -3,9 +3,9 @@ import { login as loginApi } from '../api/CommonApi';
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: () => ({
|
||||
token: '',
|
||||
userInfo: null,
|
||||
tokenExpiry: null, // 添加 Token 过期时间
|
||||
token: localStorage.getItem('user-token') || '',
|
||||
userInfo: JSON.parse(localStorage.getItem('user-info') || 'null'),
|
||||
tokenExpiry: parseInt(localStorage.getItem('user-token-expiry') || '0'),
|
||||
}),
|
||||
actions: {
|
||||
async login(username, password) {
|
||||
@@ -13,12 +13,15 @@ export const useUserStore = defineStore('user', {
|
||||
const response = await loginApi({ username, password });
|
||||
if (response && response.token) {
|
||||
this.token = response.token;
|
||||
// 解析 JWT 获取过期时间
|
||||
const payload = JSON.parse(atob(response.token.split('.')[1]));
|
||||
this.tokenExpiry = payload.exp * 1000; // 转换为毫秒
|
||||
this.tokenExpiry = payload.exp * 1000;
|
||||
if (response.userInfo) {
|
||||
this.userInfo = response.userInfo;
|
||||
}
|
||||
// 持久化到 localStorage
|
||||
localStorage.setItem('user-token', response.token);
|
||||
localStorage.setItem('user-info', JSON.stringify(response.userInfo));
|
||||
localStorage.setItem('user-token-expiry', this.tokenExpiry.toString());
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@@ -31,8 +34,10 @@ export const useUserStore = defineStore('user', {
|
||||
this.token = '';
|
||||
this.userInfo = null;
|
||||
this.tokenExpiry = null;
|
||||
localStorage.removeItem('user-token');
|
||||
localStorage.removeItem('user-info');
|
||||
localStorage.removeItem('user-token-expiry');
|
||||
},
|
||||
// 检查 Token 是否过期
|
||||
isTokenExpired() {
|
||||
if (!this.tokenExpiry) return true;
|
||||
return Date.now() >= this.tokenExpiry;
|
||||
@@ -40,16 +45,6 @@ export const useUserStore = defineStore('user', {
|
||||
},
|
||||
getters: {
|
||||
isLoggedIn: (state) => !!state.token && Date.now() < (state.tokenExpiry || 0),
|
||||
// 添加:判断是否为管理员
|
||||
isAdmin: (state) => state.userInfo?.role === 'ADMIN',
|
||||
},
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [
|
||||
{
|
||||
key: 'user-store',
|
||||
storage: sessionStorage, // 使用 sessionStorage,比 localStorage 更安全
|
||||
}
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
@@ -4,10 +4,11 @@ import { ElMessage } from 'element-plus'
|
||||
import router from '../router'
|
||||
import { getReplayAttackHeaders, needsReplayAttackValidation } from './security'
|
||||
|
||||
let retryCount = 0
|
||||
const MAX_RETRIES = 3
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL,
|
||||
// 开发环境使用withCredentials,生产环境关闭
|
||||
// withCredentials: import.meta.env.DEV,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
@@ -22,6 +23,12 @@ instance.interceptors.request.use(
|
||||
config.headers['Authorization'] = `Bearer ${userStore.token}`
|
||||
}
|
||||
|
||||
// 添加 CSRF token
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content
|
||||
if (csrfToken) {
|
||||
config.headers['X-CSRF-Token'] = csrfToken
|
||||
}
|
||||
|
||||
// 添加防重放攻击请求头(POST/PUT/DELETE 请求)
|
||||
if (needsReplayAttackValidation(config.method, config.url)) {
|
||||
const replayHeaders = getReplayAttackHeaders()
|
||||
@@ -41,6 +48,7 @@ instance.interceptors.request.use(
|
||||
// 响应拦截器
|
||||
instance.interceptors.response.use(
|
||||
response => {
|
||||
retryCount = 0
|
||||
const res = response.data;
|
||||
if (res.code !== 200) {
|
||||
ElMessage({
|
||||
@@ -53,11 +61,19 @@ instance.interceptors.response.use(
|
||||
return res.data;
|
||||
}
|
||||
},
|
||||
error => {
|
||||
async error => {
|
||||
if (error.response) {
|
||||
const status = error.response.status;
|
||||
const data = error.response.data;
|
||||
|
||||
// 503 - 服务器繁忙,重试
|
||||
if (status === 503 && retryCount < MAX_RETRIES) {
|
||||
retryCount++
|
||||
await new Promise(resolve => setTimeout(resolve, 1000 * retryCount))
|
||||
return instance(error.config)
|
||||
}
|
||||
retryCount = 0
|
||||
|
||||
// 401 - 未授权
|
||||
if (status === 401) {
|
||||
try {
|
||||
@@ -92,14 +108,7 @@ instance.interceptors.response.use(
|
||||
return Promise.reject(new Error(msg));
|
||||
}
|
||||
|
||||
// 503 - 服务器繁忙(内存不足)
|
||||
if (status === 503) {
|
||||
const msg = data?.msg || '服务器繁忙,请稍后再试';
|
||||
ElMessage.error(msg);
|
||||
return Promise.reject(new Error(msg));
|
||||
}
|
||||
|
||||
// 其他错误,生产环境隐藏详细错误信息
|
||||
// 其他错误
|
||||
const isDev = import.meta.env.DEV;
|
||||
const msg = isDev
|
||||
? (data?.msg || error.message)
|
||||
|
||||
12
biji-qianduan/src/utils/xss.js
Normal file
12
biji-qianduan/src/utils/xss.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import DOMPurify from 'dompurify'
|
||||
|
||||
export const sanitizeHtml = (html) => {
|
||||
return DOMPurify.sanitize(html, {
|
||||
ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'pre', 'img'],
|
||||
ALLOWED_ATTR: ['href', 'title', 'src', 'alt']
|
||||
})
|
||||
}
|
||||
|
||||
export const sanitizeText = (text) => {
|
||||
return DOMPurify.sanitize(text, { ALLOWED_TAGS: [] })
|
||||
}
|
||||
Reference in New Issue
Block a user