AspNetCore 中使用 Newlife.IdentityServer4 管理 IdentityServer 数据

• 本文讲述如何实现，IdentityServer 数据的管理，包括添加删除等基础操作和相应 UI

后端

• 此处直列关键点，不做详细描述，此项目跟普通的数据库管理无异，所以只做简单记录
• 实例请查看这里

添加引用

• 新建 asp.net core 项目，IdentityServer4.XCode引用，代码入口添加服务，视自己情况而定，options 的参数需要与前端配合
• 添加Easy.Admin引用，Easy.Admin包含了具有增删查改的基类控制器。并且封装了统一的响应结果，真实结果包含在 Data 属性、异常拦截处理、模型绑定等，使用后只需要关注业务即可

{ 
    "Status": 0, "Data": [ { 
    "ID": 68, "Name": "b5c4" } ], "Msg": "ok", "Paper": null } 

 services.AddIdentityServer(options => { 
    options.UserInteraction.LoginReturnUrlParameter = "returnUrl";//返回url的参数名 options.UserInteraction.LoginUrl = "/login"; options.Authentication.CookieAuthenticationScheme = "Jwt-Cookie"; }) .AddXCodeConfigurationStore() .AddXCodeOperationalStore(options => { 
    // this enables automatic token cleanup. this is optional. options.EnableTokenCleanup = true; // options.TokenCleanupInterval = 15; // interval in seconds. 15 seconds useful for debugging }) .AddDeveloperSigningCredential(); 

添加控制器

• 由于引用了Easy.Admin，我们要做的事就很简单了
• 新建控制器ClientsController，继承自EntityController
，添加相关特性

 [DisplayName("客户端")] [Route("api/[controller]")] [ApiController] public class ClientsController : EntityController<Clients> { 
    } 

• 基类EntityController<>实现了基础的增改查删操作，并自带一个搜索方法 Search，前端可根据搜索实体自定义搜索，还可跨表搜索
• 运行后导航到/swagger即可看到新增的接口
• 添加其他几个控制器，参考这里

说明

• 此后端可作为内部管理使用，为所有实体添加对应的控制器，即可生成响应的增改查删接口，日常管理数据和和开发使用特别方便
• 如果想基于此项目开发其它业务，直接增加接口，做好权限控制即可，目前版本不包含权限管理

前端

• 前端项目基于xxred/Easy.Front-End，他改造自PanJiaChen/vue-element-admin。产生于 vue-element-admin 还没升级到 vue-cli3 的时候，删了不少功能，架子大体相同，现在新版全部升级，v4.0 也发布了，Easy.Front-End 就不必再看了
• Easy.Front-End 主要考虑为基础框架，导入包引用即可使用，后续更新只需更新包的版本，而不必手动复制粘贴源码
• 重大修改的地方，只是为了搭建 IdentityServer 的前端部分，主要包括 api 地址重新设置、后端获取路由动态生成菜单、根据基础表格表单页动态生成页面

api 地址重新设置

• 这个功能其实意义不大，覆盖原系统的硬编码 api 地址，现在一般都是从头到尾自己搭建前端项目，复制框架源码的，很少是导入包直接用。当时为了两边调试方便所以做了，先说说怎么用
• Easy.Front-End 项目 src 文件夹下有个apiSettings.js文件，新建项目同样的位置也需要一个这样的文件，手动导入，更新接口，内容如下

const login = { 
    loginByUsername: '/api/users/login', logout: '/api/users/logout', getUserInfo: '/api/users/getuserinfo' } const route = { 
    getRoutes: '/api/routes' } export default settings => { 
    settings.baseUrl = 'https://localhost:44352' settings.login = login settings.route = route return settings } 

• 只需要重新定义对象进行覆盖即可。导出的是一个函数，因此可以调试到此文件，可查看到所有接口，根据自己的需要进行覆盖

后端获取路由动态生成菜单

• 此功能需要后端配合，返回类似路由的格式，再由前端进行处理组件部分
• 后端返回数据结构如下

[ { 
    "path": "/ApiResources", "component": "views/layout/Layout", "children": [ { 
    "path": "index", "template": " 
   ", //"component": "views/components/test", component为空，取template "name": "ApiResources", "meta": { 
    "title": "Api资源", "icon": "international" } } ] } ] 

• 前端接收到数据，将组件有字符路径换成方法，或者指定模板，要点如下。具体参见这里
• 要使用模板功能，vue.config.js配置文件必须设置runtimeCompiler为 true

if (router.component) { 
    const component = router.component router.component = resolve => { 
    // 动态加载组件会编译加载项目所有组件 // 这里不能全写变量，写开头确定起始地址，写结尾确定文件名 // 这样就相当于编译'@//*.vue'，编译之后模块列表才会有所有的模块，传模块路径匹配才会命中 require(['@/' + component + '.vue'], resolve) } } else if (router.template) { 
    router.component = resolve => { 
    resolve({ 
    template: router.template }) } } 

根据基础表格表单页动态生成页面

• 这个功能需要后端返回每个表的信息，字段名和展示名、数据类型等，这个数据格式自己定，简单随意就好
• 页面代码如下

<el-table v-loading="listLoading" :data="dataList"> <el-table-column v-for="(column, idx) in columns" :key="idx" :label="column.displayName" :prop="column.name" /> <el-table-column label="操作" align="center" width="230" fixed="right" class-name="small-padding fixed-width" > <template slot-scope="scope"> <el-button type="primary" size="mini" @click="handleUpdate(scope.row)" >编辑 
     el-button > <el-button v-if="scope.row.status != 'deleted'" size="mini" type="danger" @click="handleDelete(scope.row)" >删除 
      el-button >  
       template>  
        el-table-column>  
         el-table>  
         <el-form ref="dataForm" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;" > <el-form-item v-for="(column, idx) in columns" :key="idx" :label="column.displayName" :prop="column.name" > <el-switch v-if="column.typeStr=='Boolean'" v-model="temp[column.name]" style="display: block" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" /> <el-date-picker v-else-if="column.typeStr=='DateTime'" v-model="temp[column.name]" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" /> <el-input v-else v-model="temp[column.name]" type="text" :placeholder="'请输入'+column.displayName" />  
          el-form-item>  
           el-form> 

• 使用的时候，后端返回的路由数据，不要设置component，而将template设置为
，其中的 name 动态替换
• 注册全局组件table-base

// 注册全局table基础组件 Vue.component('table-base', () => import('@/components/tableBase.vue')) 

最后

• Newlife.IdentityServer4作为后端部分，引用 Easy.Admin，简化基础工作，一键生成 curd 接口，专注业务，提供所有表字段信息以供动态生成菜单和页面
• Newlife.IdentityServer4.Vue作为前端部分，引用Easy.FrontEnd，根据一些表和列信息，生成相应菜单和页面，几乎没有页面需要手写

总结

• Newlife.IdentityServer4 只是对 IdentityServer 数据简单管理，未来将会增加权限控制，前端优化页面，改善引导方便使用
• 开发中遇到的坑，大都是自己异想天开，新增的功能参考很少，但是自身弄清楚原理，导致一直不成功
• 磨刀不误砍柴工，基础夯实，才能走的更远！