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

    Userloginindex.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
      ]
    };
  • 相关阅读:
    js检测对象中是否存在某个属性
    ES6 笔记
    DataSet 用法
    CommandBehavior.CloseConnection有何作用
    SqlDataReader
    Listview.Finditem()函数用法
    Instr()函数用法
    StringBuilder与StringBuffer的区别
    [DllImport("kernel32.dll")]使用
    extern用法
  • 原文地址:https://www.cnblogs.com/Farseer1215/p/14196653.html
Copyright © 2020-2023  润新知