Ant Design Pro V5 + Django Restful Framework Token认证前台实现
后台完成以后,剩下的事情就是在ADPV5里调用接口了。
1.登陆
登陆以后,记录获取的Token,后面请求其他API的时候带上Token。
首先更改Services->API.d.ts里LoginStateType的定义,增加token属性。
export interface LoginStateType { status?: 'ok' | 'error'; token: string; }
User\loginindex.tsx将得到的token保存在localStorage中,这里不知道有没有更好的办法,想保存到内存里,可是没找到实现的方法,前端小白,举步维艰。
const msg = await fakeAccountLogin({ ...values, type }); if (msg.status === 'ok') { localStorage.setItem("token", msg.token); message.success('登录成功!'); goto(); return; }
2.后续请求增加Token
这个要通过增加拦截器实现的,在app.tsx中修改,代码如下:
const addToken :RequestInterceptor = ( url :string, options:RequestOptionsInit ) => { options.headers = { Authorization : "Bearer " + localStorage.getItem('token') } return { url, options } } export const request: RequestConfig = { errorHandler, requestInterceptors:[ addToken ] };