vue-element-admin 模板 登录页面 post请求通过django的csrf认证,处理304错误

2019/04/10 10:10
阅读数 1.7K

经过一天的研究,终于把 vue-admin-template 模板的 post 请求 和django的api 弄通了 没有了那该死的304报错了

直接贴代码:

在main.js中 我直接给设置了一个 csrf_token 全局变量来接收 csrf 认证的token

  window.csrf_token ='' //声明csrf_token 的全局变量

然后在 api 接口中设置 post方法的 

headers 请求头

headers: { 'Content-Type': 'multipart/form-data', 'X-CSRFToken': csrf_token},
1 export function login(data) {
2   return request({
3     url: '/api/user/login/',
4     method: 'post',
5     headers: { 'Content-Type': 'multipart/form-data', 'X-CSRFToken': csrf_token},
6     params:{'username':data.username,'password':data.password}
7   })
8 }

api接口获取csrf_token的接口方法

import request from '@/utils/request'


export function get_csrf() {
  return request({
    url: '/api/get_csrf',
    method: 'get',
  })
}

在系统加载登录页面时 先想后台发送get请求来获取 csrf_token 中的token

methods:{
   get_token(){
      get_csrf().then(res => {
        // console.log(res.token)
        csrf_token = res.token  //将得到的token 赋值给全局变量
      })
    }
  },
  created(){
    this.get_token() //获取csrf_token
    this.get_user() //获取用户列表
  }

这前台页面都设置好了

后台views中  创建 get_csrf 的接口 用来动态获取token

from django.middleware.csrf import get_token

# csrf认证
def get_csrf(request):
    # 生成 csrf 数据,发送给前端
    csrf_token = get_token(request)
    return JsonResponse({'token':csrf_token,'code':200})

这样前台的 所有post的请求 就可以通过csrf认证了

 

原文出处:https://www.cnblogs.com/tianyuanblog/p/12487750.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部