vue3框架选择
这里选用的是vbenjs的开源框架vue-vben-admin,vite+vue3+typescript。样式也非常好看,完美契合我的需求。
框架文档:Home | Vben Admin (vvbin.cn)
具体实现
按照惯例,先给项目跑起来,yarn install 、yarn run dev即可。如下图

1、获取登录接口
abp的登录接口并没有在Swagger页面上展示,由于使用的IdentityServer4,所以查看IdentityServer4的发现文档后找到token接口地址为/connect/token
。
因为ABP的授权模块是使用IdentityServer4,所以IdentityServer4的一些默认端点在ABP里也是同样有效的,可以参考下IdentityServer4官网。运行ABP模板项目,看一下IdentityServer4发现文档,uri是:
初识ABP vNext(3):vue对接ABP基本思路 - xhznl - 博客园 (cnblogs.com)/.well-known/openid-configuration

connect/token接口参数如下图,需注意Content-Type要改为application/x-www-form-urlencoded;charset=UTF-8
。


2、Vue项目修改
找到/store/modules/user.ts文件,修改如下
async login( params: LoginParams & { goHome?: boolean; mode?: ErrorMessageMode; }, ): Promise<CurrentUserDto | null> { try { const { goHome = true, mode, ...loginParams } = params; // 新增----------------------- const abpParams = { username: loginParams.username, password: loginParams.password, grant_type: 'password', client_id: 'NiceFriday_App', client_secret: '', scope: '', }; // 结束----------------------- const data = await loginApi(abpParams, mode); const { access_token } = data; // save token this.setToken(access_token); return this.afterLoginAction(goHome); } catch (error) { return Promise.reject(error); } }, // 修改获取用户信息方法,读取api/abp/application-configuration接口 async getUserInfoAction(): Promise<CurrentUserDto | null> { if (!this.getToken) return null; const appConfig = await ApplicationConfiguration(); console.log(appConfig); const { currentUser, auth } = appConfig; this.setGrantedPolicies(auth.grantedPolicies); const { roles = [] } = currentUser; if (isArray(roles)) { const roleList = roles.map((item) => item) as any; this.setRoleList(roleList); } else { currentUser.roles = []; this.setRoleList([]); } this.setUserInfo(currentUser); return currentUser; },
CurrentUserDto根据后台实体生成,可借助vs code插件C# to TypeScript快速生成TypeScript对象。使用方法为复制C#对象后右键粘贴时选择下面的选项即可自动生成。

找到/api/sys/user.ts文件,修改如下,需要添加headers并设置isTransformResponse为false。然后修改Login接口地址为/connect/token
。
/** * @description: user login api */ export function loginApi(params: any, mode: ErrorMessageMode = 'modal') { return defHttp.post<LoginResultModel>( { url: Api.Login, headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED } as AxiosRequestHeaders, params: params, }, { errorMessageMode: mode, isTransformResponse: false, }, ); }
新建abp.ts,创建ApplicationConfiguration接口。
import { ApplicationConfigurationDto } from './model/abpModel'; import { defHttp } from '/@/utils/http/axios'; enum Api { AbpApiDefinition = '/api/abp/api-definition', ApplicationConfiguration = '/api/abp/application-configuration', } export function ApplicationConfiguration() { return defHttp.get<ApplicationConfigurationDto>( { url: Api.ApplicationConfiguration, }, { isTransformResponse: false, }, ); }
配置项目跨域(.env.development)
VITE_PROXY = [["/connect","https://localhost:44351/connect"],["/api","https://localhost:44351/api"],["/upload","http://localhost:3300/upload"]]
在.env中修改项目端口号(VITE_PORT)为4200(根据自己的abp后台端口设置)。
全部修改完成之后可能会有报错,需要自行添加ApplicationConfigurationDto,根据需要没用的字段可以直接设置为any。

项目报错解决完成之后即可执行yarn run dev
测试登录。