refactor(auth): use group-only admin access and remove admin api-key flow from frontend/admin routes
This commit is contained in:
@@ -1,4 +1,2 @@
|
|||||||
VITE_APP_TITLE=member.ose.tw (dev)
|
VITE_APP_TITLE=member.ose.tw (dev)
|
||||||
VITE_API_BASE_URL=http://127.0.0.1:8000
|
VITE_API_BASE_URL=http://127.0.0.1:8000
|
||||||
VITE_ADMIN_CLIENT_KEY=admin-frontend
|
|
||||||
VITE_ADMIN_API_KEY=dev-admin-key-123
|
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
# member.ose.tw frontend env
|
# member.ose.tw frontend env
|
||||||
VITE_APP_TITLE=member.ose.tw
|
VITE_APP_TITLE=member.ose.tw
|
||||||
VITE_API_BASE_URL=https://memberapi.ose.tw
|
VITE_API_BASE_URL=https://memberapi.ose.tw
|
||||||
VITE_ADMIN_CLIENT_KEY=
|
|
||||||
VITE_ADMIN_API_KEY=
|
|
||||||
|
|||||||
@@ -2,8 +2,6 @@ import axios from 'axios'
|
|||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
|
|
||||||
const BASE_URL = import.meta.env.VITE_API_BASE_URL
|
const BASE_URL = import.meta.env.VITE_API_BASE_URL
|
||||||
const ENV_ADMIN_CLIENT_KEY = import.meta.env.VITE_ADMIN_CLIENT_KEY
|
|
||||||
const ENV_ADMIN_API_KEY = import.meta.env.VITE_ADMIN_API_KEY
|
|
||||||
|
|
||||||
// 使用者 API:帶 Bearer token
|
// 使用者 API:帶 Bearer token
|
||||||
export const userHttp = axios.create({ baseURL: BASE_URL })
|
export const userHttp = axios.create({ baseURL: BASE_URL })
|
||||||
@@ -27,7 +25,7 @@ userHttp.interceptors.response.use(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
// 管理員 API:帶 X-Client-Key / X-API-Key
|
// 管理員 API:只帶 Bearer token(後端再檢查 admin 群組)
|
||||||
export const adminHttp = axios.create({ baseURL: BASE_URL })
|
export const adminHttp = axios.create({ baseURL: BASE_URL })
|
||||||
|
|
||||||
adminHttp.interceptors.request.use(config => {
|
adminHttp.interceptors.request.use(config => {
|
||||||
@@ -35,16 +33,6 @@ adminHttp.interceptors.request.use(config => {
|
|||||||
if (token) {
|
if (token) {
|
||||||
config.headers['Authorization'] = `Bearer ${token}`
|
config.headers['Authorization'] = `Bearer ${token}`
|
||||||
}
|
}
|
||||||
const clientKey = sessionStorage.getItem('admin_client_key') || ENV_ADMIN_CLIENT_KEY
|
|
||||||
const apiKey = sessionStorage.getItem('admin_api_key') || ENV_ADMIN_API_KEY
|
|
||||||
if (clientKey && !sessionStorage.getItem('admin_client_key')) {
|
|
||||||
sessionStorage.setItem('admin_client_key', clientKey)
|
|
||||||
}
|
|
||||||
if (apiKey && !sessionStorage.getItem('admin_api_key')) {
|
|
||||||
sessionStorage.setItem('admin_api_key', apiKey)
|
|
||||||
}
|
|
||||||
if (clientKey) config.headers['X-Client-Key'] = clientKey
|
|
||||||
if (apiKey) config.headers['X-API-Key'] = apiKey
|
|
||||||
return config
|
return config
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,64 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-card class="mb-6 shadow-sm">
|
|
||||||
<template #header>
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<span class="font-medium text-gray-700">管理員認證</span>
|
|
||||||
<el-tag v-if="credsSaved" type="success" size="small">已儲存(session)</el-tag>
|
|
||||||
<el-tag v-else type="warning" size="small">未設定</el-tag>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<el-form :model="credsForm" inline>
|
|
||||||
<el-form-item label="X-Client-Key">
|
|
||||||
<el-input
|
|
||||||
v-model="credsForm.clientKey"
|
|
||||||
placeholder="client key"
|
|
||||||
style="width: 220px"
|
|
||||||
show-password
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="X-API-Key">
|
|
||||||
<el-input
|
|
||||||
v-model="credsForm.apiKey"
|
|
||||||
placeholder="api key"
|
|
||||||
style="width: 220px"
|
|
||||||
show-password
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="saveCreds">儲存認證</el-button>
|
|
||||||
<el-button v-if="credsSaved" @click="clearCreds" class="ml-2">清除</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { reactive, computed } from 'vue'
|
|
||||||
import { ElMessage } from 'element-plus'
|
|
||||||
import { usePermissionStore } from '@/stores/permission'
|
|
||||||
|
|
||||||
const permissionStore = usePermissionStore()
|
|
||||||
|
|
||||||
const credsForm = reactive({
|
|
||||||
clientKey: permissionStore.adminClientKey,
|
|
||||||
apiKey: permissionStore.adminApiKey
|
|
||||||
})
|
|
||||||
|
|
||||||
const credsSaved = computed(() => permissionStore.hasAdminCreds())
|
|
||||||
|
|
||||||
function saveCreds() {
|
|
||||||
if (!credsForm.clientKey || !credsForm.apiKey) {
|
|
||||||
ElMessage.warning('請填寫完整認證')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
permissionStore.setAdminCreds(credsForm.clientKey, credsForm.apiKey)
|
|
||||||
ElMessage.success('認證已儲存(session)')
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearCreds() {
|
|
||||||
permissionStore.clearAdminCreds()
|
|
||||||
credsForm.clientKey = ''
|
|
||||||
credsForm.apiKey = ''
|
|
||||||
ElMessage.info('認證已清除')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -5,19 +5,6 @@ import { grantPermission, revokePermission } from '@/api/permission-admin'
|
|||||||
|
|
||||||
export const usePermissionStore = defineStore('permission', () => {
|
export const usePermissionStore = defineStore('permission', () => {
|
||||||
const snapshot = ref(null)
|
const snapshot = ref(null)
|
||||||
const envClientKey = import.meta.env.VITE_ADMIN_CLIENT_KEY || ''
|
|
||||||
const envApiKey = import.meta.env.VITE_ADMIN_API_KEY || ''
|
|
||||||
const adminClientKey = ref(sessionStorage.getItem('admin_client_key') || envClientKey)
|
|
||||||
const adminApiKey = ref(sessionStorage.getItem('admin_api_key') || envApiKey)
|
|
||||||
|
|
||||||
if (adminClientKey.value) {
|
|
||||||
sessionStorage.setItem('admin_client_key', adminClientKey.value)
|
|
||||||
}
|
|
||||||
if (adminApiKey.value) {
|
|
||||||
sessionStorage.setItem('admin_api_key', adminApiKey.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const hasAdminCreds = () => !!(adminClientKey.value && adminApiKey.value)
|
|
||||||
|
|
||||||
async function fetchMySnapshot() {
|
async function fetchMySnapshot() {
|
||||||
const res = await getMyPermissionSnapshot()
|
const res = await getMyPermissionSnapshot()
|
||||||
@@ -25,20 +12,6 @@ export const usePermissionStore = defineStore('permission', () => {
|
|||||||
return res.data
|
return res.data
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAdminCreds(clientKey, apiKey) {
|
|
||||||
adminClientKey.value = clientKey
|
|
||||||
adminApiKey.value = apiKey
|
|
||||||
sessionStorage.setItem('admin_client_key', clientKey)
|
|
||||||
sessionStorage.setItem('admin_api_key', apiKey)
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearAdminCreds() {
|
|
||||||
adminClientKey.value = ''
|
|
||||||
adminApiKey.value = ''
|
|
||||||
sessionStorage.removeItem('admin_client_key')
|
|
||||||
sessionStorage.removeItem('admin_api_key')
|
|
||||||
}
|
|
||||||
|
|
||||||
async function grant(data) {
|
async function grant(data) {
|
||||||
const res = await grantPermission(data)
|
const res = await grantPermission(data)
|
||||||
return res.data
|
return res.data
|
||||||
@@ -51,12 +24,7 @@ export const usePermissionStore = defineStore('permission', () => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
snapshot,
|
snapshot,
|
||||||
adminClientKey,
|
|
||||||
adminApiKey,
|
|
||||||
hasAdminCreds,
|
|
||||||
fetchMySnapshot,
|
fetchMySnapshot,
|
||||||
setAdminCreds,
|
|
||||||
clearAdminCreds,
|
|
||||||
grant,
|
grant,
|
||||||
revoke
|
revoke
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user