Ant Design Pro V5 + Django Restful Framework Token認證前臺實現
阿新 • • 發佈:2020-12-27
後臺完成以後,剩下的事情就是在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 ] };