首页 > 其他 > 详细

Ant Design Pro V5 + Django Restful Framework Token认证前台实现

时间:2020-12-27 15:41:18      阅读:34      评论:0      收藏:0      [点我收藏+]

后台完成以后,剩下的事情就是在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
  ]
};

Ant Design Pro V5 + Django Restful Framework Token认证前台实现

原文:https://www.cnblogs.com/Farseer1215/p/14196653.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!