很多同学说agileconfig的ui实在是太丑了。我想想也是的，本来这个项目是我自己使用的，一开始甚至连ui都没有，全靠手动在数据库里修改数据。后来加上了ui也是使用了老掉牙的bootstrap3做为基础样式。前台框架也是使用了angularjs，同样是老掉牙的东西。过年期间终于下决心翻新agileconfig的前端ui。最后选择的前端ui框架为antdesign pro + react。至于为啥选ant-design pro是因为他好看，而且流行，选择react是因为vue跟angular我都略知一二，干脆趁此机会学一学react为何物，为何这么流行。
登录的认证方案为jwt，其实本人对jwt不太感冒（请看这里《》），无奈大家都喜欢，那我也只能随大流。
其实基于ant-design pro的界面我已经翻的差不多了，因为它支持mock数据，所以我一行后台代码都没修改，已经把界面快写完了。从现在开始要真正的跟后端代码进行联调了。那么我们先从登录开始吧。先看看后端asp.net core方面会如何进行修改。
修改asp.net core后端代码
在appsettings.json文件添加jwt相关配置。
定义一个jwtsetting类，用来读取配置。
修改startup文件的configureservices方法，修改认证scheme为jwtbearerdefaults.authenticationscheme，在addjwtbearer方法内配置jwt相关配置信息。因为前后端分离项目所以有可能api跟ui部署在不同的域名下，所以开启cors。
修改startup的configure方法，配置cors为any。
添加一个jwt静态类用来生成jwt的token。因为agileconfig的用户只有admin一个所以这里用户名，id都直接写死。
新增一个action方法做为登录的入口。在这里验证完密码后生成token，并且返回到前端。
到这里.net core这边后端代码改动的差不多了。主要是添加jwt相关的东西，这些内容网上已经写了很多了，不在赘述。
下面开始修改前端代码。
修改antdesign pro的代码
antdesign pro已经为我们生成好了登录页面，登录的逻辑等，但是原来的登录是假的，也不支持jwt token做为登录凭证，下面我们要修改多个文件来完善这个登录。
在utils/authority.ts文件内新增2个方法，用来存储跟获取token。我们的jwt token存储在localstorage里。
修改utils/request.ts文件，定义一个添加authorization头部的拦截器，并且使用这个拦截器，这有每次请求的时候自动会带上这个头部，把jwt token传送到后台。
设置prefix为http://localhost:5000这是我们的后端api的服务地址，真正生产的时候会替换为正式地址。
设置credentials为same-origin。
在services/login.ts文件内新增发起登录请求的方法。
修改models/login.ts文件，修改effects的login方法，在内部替换原来的fakeaccountlogin为accountlogin。同时修改reducers内部的changeloginstatus方法，添加settoken的代码，这有修改后登录成功后token就会被存储起来。
修改models/user.ts文件，修改effects的fetchcurrent方法为直接返回response。本来fetchcurrent是会去后台拉当前用户信息的，因为agileconfig的用户就admin一个，所以我直接写死了。
让我们试一下登录吧：）
源码在这：https://github.com/kklldog/agileconfig/tree/react_ui
到此这篇关于antdesign pro + .net core 实现基于jwt的登录认证的文章就介绍到这了,更多相关.net core 登录认证内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
