feat: add independent Bell authentication and RBAC (#12)
This commit is contained in:
QiuSW
@@ -0,0 +1,9 @@
|
||||
import request from '../../bootstrap/request'
|
||||
|
||||
export const login = data => request.post('/api/v1/auth/login', data)
|
||||
export const logout = () => request.post('/api/v1/auth/logout')
|
||||
export const currentUser = () => request.get('/api/v1/auth/me')
|
||||
export const listUsers = () => request.get('/api/v1/users')
|
||||
export const createUser = data => request.post('/api/v1/users', data)
|
||||
export const replaceRoles = (id, roles) => request.put(`/api/v1/users/${id}/roles`, { roles })
|
||||
export const listAudit = () => request.get('/api/v1/audit?limit=100')
|
||||
@@ -1,4 +1,6 @@
|
||||
<template><AppLayout><router-view /></AppLayout></template>
|
||||
<template><router-view v-if="route.meta.public" /><AppLayout v-else><router-view /></AppLayout></template>
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router'
|
||||
import AppLayout from '../layout/AppLayout.vue'
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const request = axios.create({ timeout: 10000, withCredentials: true, headers: { 'Content-Type': 'application/json' } })
|
||||
request.interceptors.response.use(response => response.data, error => Promise.reject(error.response?.data || { error: '无法连接 Bell 服务' }))
|
||||
export default request
|
||||
@@ -1,7 +1,27 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Dashboard from './Dashboard.vue'
|
||||
import Login from '../views/login/Login.vue'
|
||||
import Users from '../views/system/Users.vue'
|
||||
import Audit from '../views/system/Audit.vue'
|
||||
import store from './store'
|
||||
|
||||
export default createRouter({
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [{ path: '/', name: 'dashboard', component: Dashboard, meta: { title: '工作台' } }]
|
||||
routes: [
|
||||
{ path: '/login', name: 'login', component: Login, meta: { title: '登录', public: true } },
|
||||
{ path: '/', name: 'dashboard', component: Dashboard, meta: { title: '工作台', permission: 'dashboard:read' } },
|
||||
{ path: '/system/users', name: 'users', component: Users, meta: { title: '用户与角色', permission: 'users:read' } },
|
||||
{ path: '/system/audit', name: 'audit', component: Audit, meta: { title: '认证审计', permission: 'audit:read' } }
|
||||
]
|
||||
})
|
||||
|
||||
router.beforeEach(async to => {
|
||||
if (!store.state.identity.checked) await store.dispatch('identity/restore')
|
||||
const user = store.state.identity.user
|
||||
if (to.meta.public) return user && to.name === 'login' ? { name: 'dashboard' } : true
|
||||
if (!user) return { name: 'login', query: { redirect: to.fullPath } }
|
||||
if (to.meta.permission && !user.permissions?.includes(to.meta.permission)) return { name: 'dashboard' }
|
||||
return true
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { createStore } from 'vuex'
|
||||
import identity from '../store/modules/identity'
|
||||
|
||||
export default createStore({ state: () => ({ product: 'Bell' }) })
|
||||
export default createStore({ state: () => ({ product: 'Bell' }), modules: { identity } })
|
||||
|
||||
@@ -11,7 +11,7 @@ body { font-family:"Segoe UI Variable","Microsoft YaHei",sans-serif; color:var(-
|
||||
.nav-item.router-link-active { color:#fff; background:#1f2d3d; }
|
||||
.workspace { min-width:0; }
|
||||
.navbar { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:var(--bell-surface); border-bottom:1px solid var(--bell-stroke); }
|
||||
.navbar__identity { color:var(--bell-muted); }
|
||||
.navbar__identity { color:var(--bell-muted); display:flex; align-items:center; gap:12px; }
|
||||
.tags-view { height:34px; display:flex; align-items:end; padding:0 16px; background:#fff; border-bottom:1px solid var(--bell-stroke); }
|
||||
.tag-current { padding:6px 12px; border:1px solid var(--bell-stroke); border-bottom:2px solid var(--bell-accent); }
|
||||
.app-main { padding:20px; }
|
||||
|
||||
@@ -2,12 +2,22 @@
|
||||
<div class="shell">
|
||||
<aside class="sidebar" aria-label="主导航">
|
||||
<div class="brand"><span class="brand__mark">B</span><div><strong>Bell</strong><small>预警中心</small></div></div>
|
||||
<nav><router-link to="/" class="nav-item">工作台</router-link></nav>
|
||||
<nav>
|
||||
<router-link to="/" class="nav-item">工作台</router-link>
|
||||
<router-link v-if="has('users:read')" to="/system/users" class="nav-item">用户与角色</router-link>
|
||||
<router-link v-if="has('audit:read')" to="/system/audit" class="nav-item">认证审计</router-link>
|
||||
</nav>
|
||||
</aside>
|
||||
<section class="workspace">
|
||||
<header class="navbar"><span>学校安全预警</span><span class="navbar__identity">未登录</span></header>
|
||||
<div class="tags-view"><span class="tag-current">工作台</span></div>
|
||||
<header class="navbar"><span>学校安全预警</span><div class="navbar__identity"><span>{{ user?.display_name }}</span><el-button link @click="signOut">退出</el-button></div></header>
|
||||
<div class="tags-view"><span class="tag-current">{{ route.meta.title }}</span></div>
|
||||
<div class="app-main"><slot /></div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute,useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
const store=useStore();const route=useRoute();const router=useRouter();const user=computed(()=>store.state.identity.user);const has=permission=>store.getters['identity/has'](permission);async function signOut(){await store.dispatch('identity/logout');await router.replace('/login')}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import { currentUser, login, logout } from '../../api/auth'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: () => ({ user: null, checked: false }),
|
||||
getters: { has: state => permission => Boolean(state.user?.permissions?.includes(permission)) },
|
||||
mutations: { setUser (state, user) { state.user = user; state.checked = true } },
|
||||
actions: {
|
||||
async restore ({ commit }) { try { commit('setUser', await currentUser()) } catch (_) { commit('setUser', null) } },
|
||||
async login ({ commit }, form) { const result = await login(form); commit('setUser', result.user); return result.user },
|
||||
async logout ({ commit }) { try { await logout() } finally { commit('setUser', null) } }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<main class="login-page">
|
||||
<el-card class="login-card">
|
||||
<template #header><div><p class="eyebrow">BELL</p><h1>登录预警中心</h1><p>使用 Bell 独立账户。Sense 账户不能登录此系统。</p></div></template>
|
||||
<el-alert v-if="error" :title="error" type="error" show-icon :closable="false" />
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" @submit.prevent="submit">
|
||||
<el-form-item label="用户名" prop="username"><el-input v-model.trim="form.username" autocomplete="username" autofocus /></el-form-item>
|
||||
<el-form-item label="密码" prop="password"><el-input v-model="form.password" type="password" show-password autocomplete="current-password" @keyup.enter="submit" /></el-form-item>
|
||||
<el-button type="primary" native-type="submit" :loading="loading" class="full-button">登录 Bell</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</main>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
const store=useStore();const route=useRoute();const router=useRouter();const formRef=ref();const loading=ref(false);const error=ref('');const form=reactive({username:'',password:''});const rules={username:[{required:true,message:'请输入用户名',trigger:'blur'}],password:[{required:true,message:'请输入密码',trigger:'blur'}]}
|
||||
async function submit(){if(loading.value)return;try{await formRef.value.validate();loading.value=true;error.value='';await store.dispatch('identity/login',form);await router.replace(String(route.query.redirect||'/'))}catch(e){if(e?.error)error.value=e.error}finally{loading.value=false}}
|
||||
</script>
|
||||
<style scoped>.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:#f3f4f7}.login-card{width:min(420px,100%)}h1{margin:0 0 8px}.full-button{width:100%;min-height:44px}</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
<template><main class="page" tabindex="-1"><header class="page__header"><div><h1>认证审计</h1><p>登录、退出和权限拒绝事实仅追加保存。</p></div></header><el-table :data="items" v-loading="loading" row-key="id"><el-table-column prop="occurred_at" label="时间" min-width="180"/><el-table-column prop="action" label="动作" min-width="150"/><el-table-column prop="outcome" label="结果"><template #default="scope"><el-tag :type="scope.row.outcome==='success'?'success':'danger'">{{scope.row.outcome}}</el-tag></template></el-table-column><el-table-column prop="target_type" label="对象"/></el-table></main></template>
|
||||
<script setup>
|
||||
import { onMounted,ref } from 'vue';import { ElMessage } from 'element-plus';import { listAudit } from '../../api/auth';const items=ref([]);const loading=ref(false);onMounted(async()=>{loading.value=true;try{items.value=(await listAudit()).items}catch(e){ElMessage.error(e.error||'读取审计失败')}finally{loading.value=false}})
|
||||
</script>
|
||||
@@ -0,0 +1,4 @@
|
||||
<template><main class="page" tabindex="-1"><header class="page__header"><div><h1>用户与角色</h1><p>Bell 账户与 Sense 完全独立；按最小权限分配角色。</p></div><el-button v-if="canWrite" type="primary" @click="dialog=true">创建用户</el-button></header><el-table :data="items" v-loading="loading" row-key="id"><el-table-column prop="username" label="用户名"/><el-table-column prop="display_name" label="显示名称"/><el-table-column label="角色"><template #default="scope"><el-select v-if="canWrite" :model-value="scope.row.roles[0]" aria-label="角色" @change="role=>changeRole(scope.row,role)"><el-option v-for="option in roleOptions" :key="option.value" v-bind="option"/></el-select><span v-else>{{roleName(scope.row.roles[0])}}</span></template></el-table-column><el-table-column label="状态"><template #default="scope"><el-tag :type="scope.row.enabled?'success':'info'">{{scope.row.enabled?'启用':'停用'}}</el-tag></template></el-table-column></el-table><el-empty v-if="!loading&&!items.length" description="尚未创建用户"/><el-dialog v-model="dialog" title="创建 Bell 用户" width="min(480px, calc(100vw - 32px))" @closed="reset"><el-alert title="不会生成默认密码；密码必须由管理员安全传递。" type="info" :closable="false"/><el-form ref="formRef" :model="form" :rules="rules" label-position="top"><el-form-item label="用户名" prop="username"><el-input v-model.trim="form.username"/></el-form-item><el-form-item label="显示名称" prop="display_name"><el-input v-model.trim="form.display_name"/></el-form-item><el-form-item label="初始密码" prop="password"><el-input v-model="form.password" type="password" show-password autocomplete="new-password"/></el-form-item><el-form-item label="角色" prop="role"><el-select v-model="form.role" style="width:100%"><el-option v-for="option in roleOptions" :key="option.value" v-bind="option"/></el-select></el-form-item></el-form><template #footer><el-button @click="dialog=false">取消</el-button><el-button type="primary" :loading="saving" @click="save">创建用户</el-button></template></el-dialog></main></template>
|
||||
<script setup>
|
||||
import { computed,onMounted,reactive,ref } from 'vue';import { ElMessage } from 'element-plus';import { useStore } from 'vuex';import { createUser,listUsers,replaceRoles } from '../../api/auth';const store=useStore();const items=ref([]);const loading=ref(false);const dialog=ref(false);const saving=ref(false);const formRef=ref();const form=reactive({username:'',display_name:'',password:'',role:'operator'});const canWrite=computed(()=>store.getters['identity/has']('users:write'));const roleOptions=[{value:'administrator',label:'管理员'},{value:'operator',label:'处置员'},{value:'viewer',label:'只读用户'}];const rules={username:[{required:true,message:'请输入用户名',trigger:'blur'}],display_name:[{required:true,message:'请输入显示名称',trigger:'blur'}],password:[{required:true,message:'请输入初始密码',trigger:'blur'},{min:12,message:'至少 12 个字符',trigger:'blur'}],role:[{required:true,message:'请选择角色',trigger:'change'}]};const roleName=value=>roleOptions.find(x=>x.value===value)?.label||value;async function load(){loading.value=true;try{items.value=(await listUsers()).items}catch(e){ElMessage.error(e.error||'读取用户失败')}finally{loading.value=false}}async function save(){try{await formRef.value.validate();saving.value=true;await createUser(form);ElMessage.success('用户已创建');dialog.value=false;await load()}catch(e){if(e?.error)ElMessage.error(e.error)}finally{saving.value=false}}async function changeRole(user,role){try{await replaceRoles(user.id,[role]);ElMessage.success('角色已更新');await load()}catch(e){ElMessage.error(e.error||'角色更新失败')}}function reset(){form.username='';form.display_name='';form.password='';form.role='operator';formRef.value?.clearValidate()}onMounted(load)
|
||||
</script>
|
||||
Reference in New Issue
Block a user