修改了工具栏和更新记录的权限限制

This commit is contained in:
jinchao 2025-05-12 10:57:55 +08:00
parent afafeada2e
commit 73022787ed
4 changed files with 96 additions and 51 deletions

Binary file not shown.

View File

@ -4,10 +4,15 @@ class MainToolbar extends HTMLElement {
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
} }
connectedCallback() { async connectedCallback() {
this.render(); this.render();
this.addEventListeners(); this.addEventListeners();
this.checkUserAccessLevel(); await this.checkUserAccessLevel();
// 监听登录成功事件
document.addEventListener('login-success', async () => {
await this.checkUserAccessLevel();
});
} }
render() { render() {
@ -57,7 +62,7 @@ class MainToolbar extends HTMLElement {
} }
.tool-item.hidden { .tool-item.hidden {
display: none; display: none !important;
} }
.icon { .icon {
@ -130,18 +135,16 @@ class MainToolbar extends HTMLElement {
}); });
} }
checkUserAccessLevel() { async checkUserAccessLevel() {
// 获取用户信息
let userInfo;
try { try {
const userInfoStr = localStorage.getItem('userInfo'); const response = await fetch('/api/check-auth', {
if (!userInfoStr) { credentials: 'include'
return; });
} const result = await response.json();
userInfo = JSON.parse(userInfoStr);
if (result.success) {
// 获取用户访问级别 // 获取用户访问级别
const accessLevel = parseInt(userInfo.access_level); const accessLevel = parseInt(result.user.access_level);
// 根据用户访问级别控制开发选项的可见性 // 根据用户访问级别控制开发选项的可见性
const developOption = this.shadowRoot.getElementById('developOption'); const developOption = this.shadowRoot.getElementById('developOption');
@ -153,8 +156,9 @@ class MainToolbar extends HTMLElement {
developOption.classList.remove('hidden'); developOption.classList.remove('hidden');
} }
} }
}
} catch (error) { } catch (error) {
console.error('处理用户信息失败:', error); console.error('获取用户权限失败:', error);
} }
} }
} }

View File

@ -17,9 +17,60 @@ class SubToolbar extends HTMLElement {
} }
} }
connectedCallback() { async connectedCallback() {
this.render(); this.render();
this.addEventListeners(); this.addEventListeners();
await this.checkUserAccess();
// 监听登录成功事件
document.addEventListener('login-success', async () => {
await this.checkUserAccess();
});
}
// 检查用户权限
async checkUserAccess() {
try {
const response = await fetch('/api/check-auth', {
credentials: 'include'
});
const result = await response.json();
if (result.success) {
const accessLevel = parseInt(result.user.access_level);
// 控制管理员选项的显示
const adminItems = this.shadowRoot.querySelectorAll('.admin-only');
adminItems.forEach(item => {
item.style.display = accessLevel >= 3 ? 'flex' : 'none';
});
// 控制待办事项选项的显示
const guestItems = this.shadowRoot.querySelectorAll('.guest-hidden');
guestItems.forEach(item => {
item.style.display = accessLevel > 0 ? 'flex' : 'none';
});
} else {
// 未登录或验证失败时隐藏管理员选项和待办事项
const adminItems = this.shadowRoot.querySelectorAll('.admin-only');
adminItems.forEach(item => {
item.style.display = 'none';
});
const guestItems = this.shadowRoot.querySelectorAll('.guest-hidden');
guestItems.forEach(item => {
item.style.display = 'none';
});
}
} catch (error) {
console.error('获取用户权限失败:', error);
// 发生错误时隐藏管理员选项和待办事项
const adminItems = this.shadowRoot.querySelectorAll('.admin-only');
adminItems.forEach(item => {
item.style.display = 'none';
});
const guestItems = this.shadowRoot.querySelectorAll('.guest-hidden');
guestItems.forEach(item => {
item.style.display = 'none';
});
}
} }
render() { render() {
@ -154,7 +205,7 @@ class SubToolbar extends HTMLElement {
<img src="assets/icons/png/clock.png" alt="更新记录" class="icon"> <img src="assets/icons/png/clock.png" alt="更新记录" class="icon">
更新记录 更新记录
</div> </div>
<div class="sub-item" data-icon="check-square"> <div class="sub-item guest-hidden" data-icon="check-square">
<img src="assets/icons/png/check-square.png" alt="待办事项" class="icon"> <img src="assets/icons/png/check-square.png" alt="待办事项" class="icon">
待办事项 待办事项
</div> </div>
@ -241,7 +292,7 @@ class SubToolbar extends HTMLElement {
<img src="assets/icons/png/user.png" alt="个人中心" class="icon"> <img src="assets/icons/png/user.png" alt="个人中心" class="icon">
个人中心 个人中心
</div> </div>
<div class="sub-item" data-icon="file-text"> <div class="sub-item admin-only" data-icon="file-text">
<img src="assets/icons/png/file-text.png" alt="系统日志" class="icon"> <img src="assets/icons/png/file-text.png" alt="系统日志" class="icon">
系统日志 系统日志
</div> </div>
@ -301,14 +352,6 @@ class SubToolbar extends HTMLElement {
}); });
} }
// 更新管理员选项的显示状态
updateAdminItems(accessLevel) {
const adminItems = this.shadowRoot.querySelectorAll('.admin-only');
adminItems.forEach(item => {
item.style.display = accessLevel >= 3 ? 'flex' : 'none';
});
}
updateToolHeader() { updateToolHeader() {
const toolIcons = { const toolIcons = {
'home': { icon: 'home', text: '主页' }, 'home': { icon: 'home', text: '主页' },

View File

@ -18,17 +18,13 @@ class UpdateHistory extends HTMLElement {
// 检查用户权限 // 检查用户权限
async checkUserAccess() { async checkUserAccess() {
try { try {
// 从localStorage获取用户信息 const response = await fetch('/api/check-auth', {
const userInfo = localStorage.getItem('userInfo'); credentials: 'include'
});
const result = await response.json();
if (userInfo) { if (result.success) {
try { this.accessLevel = result.user.access_level || 0;
const user = JSON.parse(userInfo);
this.accessLevel = user.access_level || 0;
} catch (parseError) {
console.error('解析用户信息失败:', parseError);
this.accessLevel = 0;
}
} else { } else {
this.accessLevel = 0; this.accessLevel = 0;
} }
@ -694,14 +690,16 @@ class UpdateHistory extends HTMLElement {
// 获取当前登录用户名 // 获取当前登录用户名
let author = '未知用户'; let author = '未知用户';
const userInfo = localStorage.getItem('userInfo');
if (userInfo) {
try { try {
const user = JSON.parse(userInfo); const response = await fetch('/api/check-auth', {
author = user.username || '未知用户'; credentials: 'include'
} catch (parseError) { });
console.error('解析用户信息失败:', parseError); const result = await response.json();
if (result.success) {
author = result.user.username || '未知用户';
} }
} catch (error) {
console.error('获取用户信息失败:', error);
} }
try { try {