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
  ]
};


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM