zoukankan      html  css  js  c++  java
  • 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
      ]
    };
  • 相关阅读:
    jQuery.extend
    Topshelf便捷创建Windows服务
    cron表达式
    定时调度框架:Quartz.net
    sqlserver自定义函数
    HTML dom document 对象
    正则表达式之 数据验证 与 文本替换
    JavaScript 之 DOM 与 BOM
    CSS 之pseudo-classes 与pseudo-element的异同
    CSS中的 position与Grid Layout
  • 原文地址:https://www.cnblogs.com/Farseer1215/p/14196653.html
Copyright © 2011-2022 走看看