vue-element-admin 模板 登录页面 post请求通过django的csrf认证,处理304错误
经过一天的研究,终于把 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},
export function login(data) {
return request({
url: '/api/user/login/',
method: 'post',
headers: { 'Content-Type': 'multipart/form-data', 'X-CSRFToken': csrf_token},
params:{'username':data.username,'password':data.password}
})
}
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认证了
vue-element-admin 模板 登录页面 post请求通过django的csrf认证,处理304错误的更多相关文章
- 使用Vue和djangoframwork完成登录页面构建 001
使用Vue和djangoframwork完成登录页面构建 001 环境的搭建 首先,我在我的电脑的F盘创建了一个文件夹 forNote,进入到这个文件夹中 F:\forNote> vue环境的搭 ...
- elementUI+Vue实现管理系统的登录页面
<template> <div class="maxbox"> <div id="appp"> <vue-partic ...
- vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo
1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js image.png 2 .修改固定头部Header和侧边栏 Logo: image.png 1)侧边栏文 ...
- Spring Boot +Vue 项目实战笔记(二):前后端结合测试(登录页面开发)
前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...
- ajax请求session失效重定向到登录页面
在ajax请求的页面引入一个自定义的AjaxRedirect.js的文件 AjaxRedirect.js的代码如下: $(function(){ $.ajaxSetup({ type: 'POST', ...
- 一步一步理解 python web 框架,才不会从入门到放弃 -- 简单登录页面
上一节,我们基本了解了 Django 的一些配置,这一节,我们将通过一个简单的登录页面,进一步学习 Django 的使用. 新建项目 首先,新建一个 Django 项目,记得别弄错了哦. settin ...
- [python][django学习篇][11]后台admin用户登录博客,添加文章---这一章和博客首页设计没有关系
1 如果没有创建超级管理员账号,先要创建python manage.py createsuperuser 2 在admin后台注册模型(如果没有这一步,登录http://127.0.0.1:8000/ ...
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理
VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...
随机推荐
- NI Vision 介绍
NI Vision主要包括三种主要软件包: 主程序包(Vision Acquisition Software), 视觉开发模块(Vision Development Module), 以及用于自动检测 ...
- C++ 中类的内存布局
在许多笔试面试中都会涉及到sizeof 运算符的求值问题. 这类问题主要分四类: 基本数据类型,如int,bool,fload,long,long,int * 等,这一类比较简单,但要注意x86和x6 ...
- 一次完整的HTTP请求响应过程(很详细)
一. HTTP请求和响应步骤 图片来自:理解Http请求与响应 以上完整表示了HTTP请求和响应的7个步骤,下面从TCP/IP协议模型的角度来理解HTTP请求和响应如何传递的. 二.TCP/IP协 ...
- 百度AI技术
利用百度提供接口,实现智能语音 语音合成 -- TTS(text to speech) 注册 在 ai.baidu.com 页面中点击 控制台 ,弹出登陆 / 注册页面 创建应用 登陆成功后,点击左侧 ...
- C语言学习笔记之获取文件长度
本文为原创文章,转载请标明出处 #include <stdio.h> #include <stdlib.h> int main() { FILE *inputFile; inp ...
- 介绍vue-cli脚手架config目录下index.js配置文件
1.config/index.js var path = require('path') module.exports = { build: { // production 环境 env: requi ...
- 求最长公共子序列-DP问题
Longest common subsequence problem The longest common subsequence (LCS) problem is the problem of fi ...
- Java web期末项目第一阶段成果发表
摘要 我们做的系统是一个基于Java web与MySQL的食堂订餐系统 班级: 计科二班 小组成员:李鉴宣.袁超 我们的第一阶段主要完成以下三件事: 完成项目的需求分析 完成项目的领域逻辑(domai ...
- [洛谷P4556] 雨天的尾巴
这道题可以用线段树合并做,网上的题解基本上都是线段树合并的. 但是为什么我就偏偏要用dsu on tree...... 题目传送门 dsu on tree的方法类似[CF1009F] Dominant ...
- 正则提取关键字符-python代码实现
原文地址:http://www.bugingcode.com/blog/python_re_extraction_key.html 关于python的正则使用在以前的文章中 http://www.bu ...