不少同窗说AgileConfig的UI实在是太丑了。我想一想也是的,原本这个项目是我本身使用的,一开始甚至连UI都没有,全靠手动在数据库里修改数据。后来加上了UI也是使用了老掉牙的bootstrap3作为基础样式。前台框架也是使用了angularjs,一样是老掉牙的东西。过年期间终于下决心翻新AgileConfig的前端UI。最后选择的前端UI框架为AntDesign Pro + React。至于为啥选Ant-Design Pro是由于他好看,并且流行,选择React是由于VUE跟Angular我都略知一二,干脆趁此机会学一学React为什么物,为什么这么流行。
登陆的认证方案为JWT,其实本人对JWT不太感冒(请看这里《咱们真的须要jwt吗?》),无奈你们都喜欢,那我也只能随大流。
其实基于ant-design pro的界面我已经翻的差很少了,由于它支持mock数据,因此我一行后台代码都没修改,已经把界面快些完了。从如今开始要真正的跟后端代码进行联调了。那么咱们先从登陆开始吧。先看看后端asp.net core方面会如何进行修改。前端
"JwtSetting": { "SecurityKey": "xxxxxxxxxxxx", // 密钥 "Issuer": "agileconfig.admin", // 颁发者 "Audience": "agileconfig.admin", // 接收者 "ExpireSeconds": 20 // 过时时间 s }
在appsettings.json文件添加jwt相关配置。angularjs
public class JwtSetting { static JwtSetting() { Instance = new JwtSetting(); Instance.Audience = Global.Config["JwtSetting:Audience"]; Instance.SecurityKey = Global.Config["JwtSetting:SecurityKey"]; Instance.Issuer = Global.Config["JwtSetting:Issuer"]; Instance.ExpireSeconds = int.Parse(Global.Config["JwtSetting:ExpireSeconds"]); } public string SecurityKey { get; set; } public string Issuer { get; set; } public string Audience { get; set; } public int ExpireSeconds { get; set; } public static JwtSetting Instance { get; } }
定义一个JwtSetting类,用来读取配置。数据库
public void ConfigureServices(IServiceCollection services) { services.AddMemoryCache(); services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme) .AddJwtBearer(options => { options.TokenValidationParameters = new TokenValidationParameters { ValidIssuer = JwtSetting.Instance.Issuer, ValidAudience = JwtSetting.Instance.Audience, IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(JwtSetting.Instance.SecurityKey)), }; }); services.AddCors(); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_3_0).AddRazorRuntimeCompilation(); services.AddFreeSqlDbContext(); services.AddBusinessServices(); services.AddAntiforgery(o => o.SuppressXFrameOptionsHeader = true); }
修改Startup文件的ConfigureServices方法,修改认证Scheme为JwtBearerDefaults.AuthenticationScheme,在AddJwtBearer方法内配置jwt相关配置信息。由于先后端分离项目因此有可能api跟ui部署在不一样的域名下,因此开启Core。json
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IServiceProvider serviceProvider) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseMiddleware<ExceptionHandlerMiddleware>(); } app.UseCors(op=> { op.AllowAnyOrigin(); op.AllowAnyMethod(); op.AllowAnyHeader(); }); app.UseWebSockets(new WebSocketOptions() { KeepAliveInterval = TimeSpan.FromSeconds(60), ReceiveBufferSize = 2 * 1024 }); app.UseMiddleware<WebsocketHandlerMiddleware>(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthentication(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapDefaultControllerRoute(); }); }
修改Startup的Configure方法,配置Cors为Any。bootstrap
public class JWT { public static string GetToken() { //建立用户身份标识,可按须要添加更多信息 var claims = new Claim[] { new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()), new Claim("id", "admin", ClaimValueTypes.String), // 用户id new Claim("name", "admin"), // 用户名 new Claim("admin", true.ToString() ,ClaimValueTypes.Boolean) // 是不是管理员 }; var key = Encoding.UTF8.GetBytes(JwtSetting.Instance.SecurityKey); //建立令牌 var token = new JwtSecurityToken( issuer: JwtSetting.Instance.Issuer, audience: JwtSetting.Instance.Audience, signingCredentials: new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature), claims: claims, notBefore: DateTime.Now, expires: DateTime.Now.AddSeconds(JwtSetting.Instance.ExpireSeconds) ); string jwtToken = new JwtSecurityTokenHandler().WriteToken(token); return jwtToken; } }
添加一个JWT静态类用来生成jwt的token。由于agileconfig的用户只有admin一个因此这里用户名,ID都直接写死。后端
[HttpPost("admin/jwt/login")] public async Task<IActionResult> Login4AntdPro([FromBody] LoginVM model) { string password = model.password; if (string.IsNullOrEmpty(password)) { return Json(new { status = "error", message = "密码不能为空" }); } var result = await _settingService.ValidateAdminPassword(password); if (result) { var jwt = JWT.GetToken(); return Json(new { status="ok", token=jwt, type= "Bearer", currentAuthority = "admin" }); } return Json(new { status = "error", message = "密码错误" }); }
新增一个Action方法作为登陆的入口。在这里验证完密码后生成token,而且返回到前端。
到这里.net core这边后端代码改动的差很少了。主要是添加jwt相关的东西,这些内容网上已经写了不少了,不在赘述。
下面开始修改前端代码。api
AntDesign Pro已经为咱们生成好了登陆页面,登陆的逻辑等,可是原来的登陆是假的,也不支持jwt token作为登陆凭证,下面咱们要修改多个文件来完善这个登陆。cookie
export function setToken(token:string): void { localStorage.setItem('token', token); } export function getToken(): string { var tk = localStorage.getItem('token'); if (tk) { return tk as string; } return ''; }
在utils/authority.ts文件内新增2个方法,用来存储跟获取token。咱们的jwt token存储在localStorage里。app
/** 配置request请求时的默认参数 */ const request = extend({ prefix: 'http://localhost:5000', errorHandler, // 默认错误处理 credentials: 'same-origin', // 默认请求是否带上cookie, headers: { Authorization: 'Bearer '+getToken(), }, });
修改utils/request.ts文件,在extend方法内添加jwt认证的头部Authorization为咱们的token。
设置prefix为http://localhost:5000这是咱们的后端api的服务地址,真正生产的时候会替换为正式地址。
设置credentials为same-origin。框架
export async function accountLogin(params: LoginParamsType) { return request('/admin/jwt/login', { method: 'POST', data: params, }); }
在services/login.ts文件内新增发起登陆请求的方法。
effects: { *login({ payload }, { call, put }) { const response = yield call(accountLogin, payload); yield put({ type: 'changeLoginStatus', payload: response, }); // Login successfully if (response.status === 'ok') { const urlParams = new URL(window.location.href); const params = getPageQuery(); message.success('???? ???? ???? 登陆成功!'); let { redirect } = params as { redirect: string }; if (redirect) { console.log('redirect url ' , redirect); const redirectUrlParams = new URL(redirect); if (redirectUrlParams.origin === urlParams.origin) { redirect = redirect.substr(urlParams.origin.length); if (redirect.match(/^\/.*#/)) { redirect = redirect.substr(redirect.indexOf('#') + 1); } } else { window.location.href = '/'; return; } } history.replace(redirect || '/'); } }, reducers: { changeLoginStatus(state, { payload }) { setAuthority(payload.currentAuthority); setToken(payload.token) return { ...state, status: payload.status, type: payload.type, }; }, },
修改models/login.ts文件,修改effects的login方法,在内部替换原来的fakeAccountLogin为accountLogin。同时修改reducers内部的changeLoginStatus方法,添加setToken的代码,这有修改后登陆成功后token就会被存储起来。
effects: { *fetch(_, { call, put }) { const response = yield call(queryUsers); yield put({ type: 'save', payload: response, }); }, *fetchCurrent(_, { call, put }) { const response = { name: '管理员', userid: 'admin' }; yield put({ type: 'saveCurrentUser', payload: response, }); }, },
修改models/user.ts文件,修改effects的fetchCurrent方法为直接返回response。原本fetchCurrent是会去后台拉当前用户信息的,由于agileconfig的用户就admin一个,因此我直接写死了。