fix: 对齐租户端鉴权与后端菜单流程
将登录/用户信息/权限/菜单接口对齐到租户后端,补充默认租户头与令牌刷新逻辑,并强制使用后端菜单模式以保证登录后触发 /auth/menu 加载。
This commit is contained in:
@@ -4,10 +4,13 @@ VITE_PORT=5666
|
|||||||
VITE_BASE=/
|
VITE_BASE=/
|
||||||
|
|
||||||
# 接口地址
|
# 接口地址
|
||||||
VITE_GLOB_API_URL=/api
|
VITE_GLOB_API_URL=https://api-tenant-dev.laosankeji.com/api/tenant/v1
|
||||||
|
|
||||||
|
# 可选:默认租户标识(若登录不使用 账号@手机号,可在此配置)
|
||||||
|
VITE_TENANT_ID=806357433394921472
|
||||||
|
|
||||||
# 是否开启 Nitro Mock服务,true 为开启,false 为关闭
|
# 是否开启 Nitro Mock服务,true 为开启,false 为关闭
|
||||||
VITE_NITRO_MOCK=true
|
VITE_NITRO_MOCK=false
|
||||||
|
|
||||||
# 是否打开 devtools,true 为打开,false 为关闭
|
# 是否打开 devtools,true 为打开,false 为关闭
|
||||||
VITE_DEVTOOLS=false
|
VITE_DEVTOOLS=false
|
||||||
|
|||||||
@@ -1,20 +1,43 @@
|
|||||||
import { baseRequestClient, requestClient } from '#/api/request';
|
import { baseRequestClient, requestClient } from '#/api/request';
|
||||||
|
|
||||||
export namespace AuthApi {
|
export namespace AuthApi {
|
||||||
|
export interface CurrentUserProfile {
|
||||||
|
account?: string;
|
||||||
|
avatar?: string;
|
||||||
|
displayName?: string;
|
||||||
|
merchantId?: null | number | string;
|
||||||
|
permissions?: string[];
|
||||||
|
roles?: string[];
|
||||||
|
tenantId?: number | string;
|
||||||
|
userId?: number | string;
|
||||||
|
}
|
||||||
|
|
||||||
/** 登录接口参数 */
|
/** 登录接口参数 */
|
||||||
export interface LoginParams {
|
export interface LoginParams {
|
||||||
|
account?: string;
|
||||||
password?: string;
|
password?: string;
|
||||||
username?: string;
|
username?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 登录接口返回值 */
|
/** 登录接口返回值 */
|
||||||
export interface LoginResult {
|
export interface LoginResult {
|
||||||
accessToken: string;
|
accessToken?: string;
|
||||||
|
accessTokenExpiresAt?: string;
|
||||||
|
isNewUser?: boolean;
|
||||||
|
refreshToken?: string;
|
||||||
|
refreshTokenExpiresAt?: string;
|
||||||
|
user?: CurrentUserProfile;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface RefreshTokenResult {
|
export interface RefreshTokenParams {
|
||||||
data: string;
|
refreshToken: string;
|
||||||
status: number;
|
}
|
||||||
|
|
||||||
|
export interface ApiResponse<T> {
|
||||||
|
code: number;
|
||||||
|
data: T;
|
||||||
|
message?: string;
|
||||||
|
success: boolean;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -22,30 +45,33 @@ export namespace AuthApi {
|
|||||||
* 登录
|
* 登录
|
||||||
*/
|
*/
|
||||||
export async function loginApi(data: AuthApi.LoginParams) {
|
export async function loginApi(data: AuthApi.LoginParams) {
|
||||||
return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
|
const account = data.account ?? data.username;
|
||||||
|
return requestClient.post<AuthApi.LoginResult>('/auth/login', {
|
||||||
|
account,
|
||||||
|
password: data.password,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 刷新accessToken
|
* 刷新accessToken
|
||||||
*/
|
*/
|
||||||
export async function refreshTokenApi() {
|
export async function refreshTokenApi(data: AuthApi.RefreshTokenParams) {
|
||||||
return baseRequestClient.post<AuthApi.RefreshTokenResult>('/auth/refresh', {
|
return baseRequestClient.post<AuthApi.ApiResponse<AuthApi.LoginResult>>(
|
||||||
withCredentials: true,
|
'/auth/refresh',
|
||||||
});
|
data,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 退出登录
|
* 退出登录
|
||||||
*/
|
*/
|
||||||
export async function logoutApi() {
|
export async function logoutApi() {
|
||||||
return baseRequestClient.post('/auth/logout', {
|
return baseRequestClient.post('/auth/logout');
|
||||||
withCredentials: true,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取用户权限码
|
* 获取用户权限码
|
||||||
*/
|
*/
|
||||||
export async function getAccessCodesApi() {
|
export async function getAccessCodesApi() {
|
||||||
return requestClient.get<string[]>('/auth/codes');
|
return requestClient.get<string[]>('/auth/permissions');
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,5 +6,5 @@ import { requestClient } from '#/api/request';
|
|||||||
* 获取用户所有菜单
|
* 获取用户所有菜单
|
||||||
*/
|
*/
|
||||||
export async function getAllMenusApi() {
|
export async function getAllMenusApi() {
|
||||||
return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
|
return requestClient.get<RouteRecordStringComponent[]>('/auth/menu');
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,9 +2,46 @@ import type { UserInfo } from '@vben/types';
|
|||||||
|
|
||||||
import { requestClient } from '#/api/request';
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
const TENANT_STORAGE_KEY = 'sys-tenant-id';
|
||||||
|
|
||||||
|
interface TenantUserProfile {
|
||||||
|
account?: string;
|
||||||
|
avatar?: string;
|
||||||
|
displayName?: string;
|
||||||
|
merchantId?: null | number | string;
|
||||||
|
permissions?: string[];
|
||||||
|
roles?: string[];
|
||||||
|
tenantId?: number | string;
|
||||||
|
userId?: number | string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeId(value: null | number | string | undefined) {
|
||||||
|
if (value === null || value === undefined) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return String(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapProfileToUserInfo(profile: TenantUserProfile): UserInfo {
|
||||||
|
return {
|
||||||
|
avatar: profile.avatar ?? '',
|
||||||
|
desc: '',
|
||||||
|
homePath: '',
|
||||||
|
realName: profile.displayName ?? profile.account ?? '',
|
||||||
|
roles: profile.roles ?? [],
|
||||||
|
token: '',
|
||||||
|
userId: normalizeId(profile.userId),
|
||||||
|
username: profile.account ?? '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取用户信息
|
* 获取用户信息
|
||||||
*/
|
*/
|
||||||
export async function getUserInfoApi() {
|
export async function getUserInfoApi() {
|
||||||
return requestClient.get<UserInfo>('/user/info');
|
const profile = await requestClient.get<TenantUserProfile>('/auth/profile');
|
||||||
|
if (profile.tenantId !== null && profile.tenantId !== undefined) {
|
||||||
|
localStorage.setItem(TENANT_STORAGE_KEY, String(profile.tenantId));
|
||||||
|
}
|
||||||
|
return mapProfileToUserInfo(profile);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,6 +20,46 @@ import { useAuthStore } from '#/store';
|
|||||||
import { refreshTokenApi } from './core';
|
import { refreshTokenApi } from './core';
|
||||||
|
|
||||||
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
|
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
|
||||||
|
const TENANT_HEADER_KEY = 'X-Tenant-Id';
|
||||||
|
const TENANT_STORAGE_KEY = 'sys-tenant-id';
|
||||||
|
const DEV_TENANT_ID = import.meta.env.DEV ? import.meta.env.VITE_TENANT_ID : '';
|
||||||
|
|
||||||
|
function getHeaderValue(headers: any, key: string) {
|
||||||
|
if (!headers) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof headers.get === 'function') {
|
||||||
|
return headers.get(key) || headers.get(key.toLowerCase()) || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return headers[key] || headers[key.toLowerCase()] || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function setHeaderValue(headers: any, key: string, value: string) {
|
||||||
|
if (!headers) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof headers.set === 'function') {
|
||||||
|
headers.set(key, value);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
headers[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolveTenantId() {
|
||||||
|
const hostname = window.location.hostname;
|
||||||
|
const hostnameParts = hostname.split('.').filter(Boolean);
|
||||||
|
const isIpAddress = /^\d+\.\d+\.\d+\.\d+$/.test(hostname);
|
||||||
|
const subdomainTenantId =
|
||||||
|
hostnameParts.length > 2 && !isIpAddress ? hostnameParts[0] : '';
|
||||||
|
|
||||||
|
const storageTenantId = localStorage.getItem(TENANT_STORAGE_KEY) || '';
|
||||||
|
|
||||||
|
return subdomainTenantId || storageTenantId || DEV_TENANT_ID || '';
|
||||||
|
}
|
||||||
|
|
||||||
function createRequestClient(baseURL: string, options?: RequestClientOptions) {
|
function createRequestClient(baseURL: string, options?: RequestClientOptions) {
|
||||||
const client = new RequestClient({
|
const client = new RequestClient({
|
||||||
@@ -50,10 +90,27 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
|
|||||||
*/
|
*/
|
||||||
async function doRefreshToken() {
|
async function doRefreshToken() {
|
||||||
const accessStore = useAccessStore();
|
const accessStore = useAccessStore();
|
||||||
const resp = await refreshTokenApi();
|
const currentRefreshToken = accessStore.refreshToken;
|
||||||
const newToken = resp.data;
|
|
||||||
accessStore.setAccessToken(newToken);
|
if (!currentRefreshToken) {
|
||||||
return newToken;
|
throw new Error('refresh token is required');
|
||||||
|
}
|
||||||
|
|
||||||
|
const resp = await refreshTokenApi({
|
||||||
|
refreshToken: currentRefreshToken,
|
||||||
|
});
|
||||||
|
|
||||||
|
const tokenData = resp?.data;
|
||||||
|
const newAccessToken = tokenData?.accessToken;
|
||||||
|
const newRefreshToken = tokenData?.refreshToken ?? currentRefreshToken;
|
||||||
|
|
||||||
|
if (!newAccessToken) {
|
||||||
|
throw new Error('access token is missing in refresh response');
|
||||||
|
}
|
||||||
|
|
||||||
|
accessStore.setAccessToken(newAccessToken);
|
||||||
|
accessStore.setRefreshToken(newRefreshToken);
|
||||||
|
return newAccessToken;
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatToken(token: null | string) {
|
function formatToken(token: null | string) {
|
||||||
@@ -65,8 +122,20 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
|
|||||||
fulfilled: async (config) => {
|
fulfilled: async (config) => {
|
||||||
const accessStore = useAccessStore();
|
const accessStore = useAccessStore();
|
||||||
|
|
||||||
config.headers.Authorization = formatToken(accessStore.accessToken);
|
const authorization = formatToken(accessStore.accessToken);
|
||||||
config.headers['Accept-Language'] = preferences.app.locale;
|
if (authorization) {
|
||||||
|
setHeaderValue(config.headers, 'Authorization', authorization);
|
||||||
|
}
|
||||||
|
setHeaderValue(config.headers, 'Accept-Language', preferences.app.locale);
|
||||||
|
|
||||||
|
const headerTenantId = getHeaderValue(config.headers, TENANT_HEADER_KEY);
|
||||||
|
if (!headerTenantId) {
|
||||||
|
const tenantId = resolveTenantId();
|
||||||
|
if (tenantId) {
|
||||||
|
setHeaderValue(config.headers, TENANT_HEADER_KEY, String(tenantId));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -76,7 +145,7 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
|
|||||||
defaultResponseInterceptor({
|
defaultResponseInterceptor({
|
||||||
codeField: 'code',
|
codeField: 'code',
|
||||||
dataField: 'data',
|
dataField: 'data',
|
||||||
successCode: 0,
|
successCode: 200,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { initPreferences } from '@vben/preferences';
|
import { initPreferences, updatePreferences } from '@vben/preferences';
|
||||||
import { unmountGlobalLoading } from '@vben/utils';
|
import { unmountGlobalLoading } from '@vben/utils';
|
||||||
|
|
||||||
import { overridesPreferences } from './preferences';
|
import { overridesPreferences } from './preferences';
|
||||||
@@ -19,6 +19,13 @@ async function initApplication() {
|
|||||||
overrides: overridesPreferences,
|
overrides: overridesPreferences,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
updatePreferences({
|
||||||
|
app: {
|
||||||
|
accessMode: 'backend',
|
||||||
|
defaultHomePath: '/dashboard/console',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
// 启动应用并挂载
|
// 启动应用并挂载
|
||||||
// vue应用主要逻辑及视图
|
// vue应用主要逻辑及视图
|
||||||
const { bootstrap } = await import('./bootstrap');
|
const { bootstrap } = await import('./bootstrap');
|
||||||
|
|||||||
@@ -8,6 +8,11 @@ import { defineOverridesPreferences } from '@vben/preferences';
|
|||||||
export const overridesPreferences = defineOverridesPreferences({
|
export const overridesPreferences = defineOverridesPreferences({
|
||||||
// overrides
|
// overrides
|
||||||
app: {
|
app: {
|
||||||
|
accessMode: 'backend',
|
||||||
|
defaultHomePath: '/dashboard/console',
|
||||||
name: import.meta.env.VITE_APP_TITLE,
|
name: import.meta.env.VITE_APP_TITLE,
|
||||||
},
|
},
|
||||||
|
theme: {
|
||||||
|
mode: 'light',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -33,11 +33,12 @@ export const useAuthStore = defineStore('auth', () => {
|
|||||||
let userInfo: null | UserInfo = null;
|
let userInfo: null | UserInfo = null;
|
||||||
try {
|
try {
|
||||||
loginLoading.value = true;
|
loginLoading.value = true;
|
||||||
const { accessToken } = await loginApi(params);
|
const { accessToken, refreshToken } = await loginApi(params);
|
||||||
|
|
||||||
// 如果成功获取到 accessToken
|
// 如果成功获取到 accessToken
|
||||||
if (accessToken) {
|
if (accessToken) {
|
||||||
accessStore.setAccessToken(accessToken);
|
accessStore.setAccessToken(accessToken);
|
||||||
|
accessStore.setRefreshToken(refreshToken ?? null);
|
||||||
|
|
||||||
// 获取用户信息并存储到 accessStore 中
|
// 获取用户信息并存储到 accessStore 中
|
||||||
const [fetchUserInfoResult, accessCodes] = await Promise.all([
|
const [fetchUserInfoResult, accessCodes] = await Promise.all([
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { VbenFormSchema } from '@vben/common-ui';
|
import type { VbenFormSchema } from '@vben/common-ui';
|
||||||
import type { BasicOption } from '@vben/types';
|
|
||||||
|
|
||||||
import { computed, markRaw } from 'vue';
|
import { computed, markRaw } from 'vue';
|
||||||
|
|
||||||
@@ -13,59 +12,14 @@ defineOptions({ name: 'Login' });
|
|||||||
|
|
||||||
const authStore = useAuthStore();
|
const authStore = useAuthStore();
|
||||||
|
|
||||||
const MOCK_USER_OPTIONS: BasicOption[] = [
|
|
||||||
{
|
|
||||||
label: 'Super',
|
|
||||||
value: 'vben',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Admin',
|
|
||||||
value: 'admin',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'User',
|
|
||||||
value: 'jack',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const formSchema = computed((): VbenFormSchema[] => {
|
const formSchema = computed((): VbenFormSchema[] => {
|
||||||
return [
|
return [
|
||||||
{
|
|
||||||
component: 'VbenSelect',
|
|
||||||
componentProps: {
|
|
||||||
options: MOCK_USER_OPTIONS,
|
|
||||||
placeholder: $t('authentication.selectAccount'),
|
|
||||||
},
|
|
||||||
fieldName: 'selectAccount',
|
|
||||||
label: $t('authentication.selectAccount'),
|
|
||||||
rules: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: $t('authentication.selectAccount') })
|
|
||||||
.optional()
|
|
||||||
.default('vben'),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
component: 'VbenInput',
|
component: 'VbenInput',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
placeholder: $t('authentication.usernameTip'),
|
placeholder: $t('authentication.usernameTip'),
|
||||||
},
|
},
|
||||||
dependencies: {
|
fieldName: 'account',
|
||||||
trigger(values, form) {
|
|
||||||
if (values.selectAccount) {
|
|
||||||
const findUser = MOCK_USER_OPTIONS.find(
|
|
||||||
(item) => item.value === values.selectAccount,
|
|
||||||
);
|
|
||||||
if (findUser) {
|
|
||||||
form.setValues({
|
|
||||||
password: '123456',
|
|
||||||
username: findUser.value,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
triggerFields: ['selectAccount'],
|
|
||||||
},
|
|
||||||
fieldName: 'username',
|
|
||||||
label: $t('authentication.username'),
|
label: $t('authentication.username'),
|
||||||
rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
|
rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user