AntDesign Pro + .NET Core 实现基于JWT的登录认证 (2)

新增一个Action方法做为登录的入口。在这里验证完密码后生成token，并且返回到前端。
到这里.net core这边后端代码改动的差不多了。主要是添加jwt相关的东西，这些内容网上已经写了很多了，不在赘述。
下面开始修改前端代码。

修改AntDesign Pro的代码

AntDesign Pro已经为我们生成好了登录页面，登录的逻辑等，但是原来的登录是假的，也不支持jwt token做为登录凭证，下面我们要修改多个文件来完善这个登录。

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里。

/** 配置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为: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('