Django 和 vue 的登录验证

标签: django

1.前端利用vue中的axios进行传值,将获取到的账号密码以form表单的形式发送给后台django。
2.后台django 校验用户信息是否正确,然后用session记录用户的登录状态,下次请求时候用session验证。

前端

1. axios 配置:
主要是在请求前添加django 的csrf 防护功能的验证token

// axios 配置
import axios from 'axios'
import store from './store'
// axios 全局配置
axios.defaults.baseURL = 'http://127.0.0.1:8000/';
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.withCredentials = true

// 请求拦截
axios.interceptors.request.use(
  config => {
    if (store.getters.token) { // 若存在token,则每个Http Header都加上token
      config.headers.Authorization = `token ${store.getters.token}`
    }
    console.log('request请求配置', config)
    console.log(`token is ${store.getters.token}`)
    return config
  },
  err => {
    return Promise.reject(err)
  })
// 响应 拦截
axios.interceptors.response.use(
  response => {
    // console.log('成功响应:', response)
    return response
  },
  error => {
    if (error.response) {
      console.log(error.response)
    }
    return Promise.reject(error.response) // 返回接口返回的错误信息
  }
)
export default axios

2. form 表单提交过程
注: ElementUI 的from 表单,非常好用

login(formName) {
      this.$refs[formName].validate(valid => {
        let username = encodeURIComponent(this.ruleForm.username);
        let password = this.ruleForm.password.toString();
        console.log(`username is ${username}`)
        console.log(`password is ${password}`)
        let data = {
          'username': username,
          'password': password,
        }
        if (valid) {
          axios.request({
            url:'/user/login',
            method: 'post',
            data: Qs.stringify(data),
          }).then((res) => {
            console.log(res)
            // this.bindLogin(this.ruleForm.name)
            // this.saveUser(this.ruleForm.name)
            this.$notify({
              title: '成功',
              message: '恭喜,登录成功。',
              duration: 3000,
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push({
                path: '/'
              })
            }, 500)

          }).catch((err) => {
            console.log(err)
          })
        }
      })

后台

1. settting.py 中session 的配置
1.1 MIDDLEWARE_CLASSES 确保其中包含以下内容

'django.contrib.sessions.middleware.SessionMiddleware',

1.2 INSTALLED_APPS 确保其中包含以下内容

'django.contrib.sessions'

1.3 添加一些配置

# session 配置
SESSION_ENGINE = 'django.contrib.sessions.backends.db'  # 引擎(默认)
SESSION_COOKIE_DOMAIN = None  # Session的cookie保存的域名(默认)
SESSION_COOKIE_SECURE = False  # 是否Https传输cookie(默认)
SESSION_COOKIE_HTTPONLY = True  # 是否Session的cookie只支持http传输(默认)
SESSION_COOKIE_AGE = 60  # Session的cookie失效日期(1209600 2周 默认)
SESSION_EXPIRE_AT_BROWSER_CLOSE = True  # 是否关闭浏览器使得Session过期(False 默认)
SESSION_SAVE_EVERY_REQUEST = False  # 是否每次请求都保存Session,默认修改之后才保存

# 跨域忽略
CORS_ALLOW_CREDENTIALS = True  # 允许带cookie
CORS_ORIGIN_ALLOW_ALL = True   # 允许所有源访问

2. 登录view视图

class LoginView(View):
    def get(self, request):
        return token.token(request)

    def post(self, request):
        """登录校验"""
        # 接收数据
        username = request.POST.get('username')
        password = request.POST.get('password')
        # 校验数据
        if not all([username, password]):
            # 数据不完整
            _info['msg'] = '信息不完整'
            return HttpResponse(json.dumps(_info))
        # 登录校验
        user = authenticate(username=username, password=password)
        if user is not None:  # 用户名密码正确
            # 记录用户的登录状态
            # login(request, user)
            request.session['username'] = user.username
            request.session['is_login'] = True

            _info['msg'] = '登录成功'
            _info['result'] = '登录成功'
            res = HttpResponse()
            res.content = json.dumps(_info)
            res.set_cookie('username', username)
            return res

        else:
            # 用户名或密码错误
            _info['msg'] = '用户名或密码错误'
            _info['result'] = '登录错误'
            return HttpResponse(json.dumps(_info))

3. 登录验证的装饰器

def login_required(view_func):
    # 登录判断装饰器
    def wrapper(request, *view_args, **view_kwargs):
        if request.COOKIES.get("username", None): 
            name = request.COOKIES.get("username", None)
            print('get cookie [{}]'.format(name))
        # 判断用户是否登录,session验证
        if request.session.get("is_login", None):
            name = request.session.get("username", None)
            print('get session username is [{}]'.format(name))
            return view_func(request, *view_args, **view_kwargs)
        else:
            # 用户未登录,返回信息
            _info['msg'] = '还未登录'
            return HttpResponse(json.dumps(_info))
    return wrapper

4. 在需要登录才能访问的视图中用登录装饰器装饰即可

@login_required
def get_citys_data(request):
    print('get citys data')
    test_datas = Citys.objects.all()
    data_list = [data.area for data in test_datas]
    _info = define_info.res_info
    _info['msg'] = ''
    _info['result'] = data_list
    
    res = HttpResponse()
    res.content = json.dumps(_info)
    return res

结果

在这里插入图片描述
在这里插入图片描述

版权声明:本文为qq_37561833原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37561833/article/details/103882934

智能推荐

AtCoder Beginner Contest 174 E.Logs

AtCoder Beginner Contest 174 E.Logs 题目链接 到最后才发现是二分,菜菜的我/(ㄒoㄒ)/~~ 我们直接二分 [1,max{a[i]}][1,max\lbrace a[i]\rbrace][1,max{a[i]}] 即可,对每一个 midmidmid,每个数 a[i]a[i]a[i] 只需要切 a[i]−1mid\frac{a[i]-1}{mid}mi...

小程序基础与实战案例

小程序开发工具与基础 小程序开发准备: 申请小程序账号( appid ) 下载并安装微信开发者工具 具体步骤如下: 先进入 微信公众平台 ,下拉页面,把鼠标悬浮在小程序图标上 然后点击 小程序开发文档 照着里面给的步骤,就可以申请到小程序账号了。 然后就可以下载 开发者工具 了 下载完打开后的界面就是这个样子 下面让我们来新建一个小程序开发项目: 在AppID输入自己刚刚注册的AppID就可以,或...

VMware centOS7 下通过minikube部署Kubernetes

1、环境准备: VMware CentOS-7-x86_64 CPU:2*2core 内存:8G 宿主机和虚拟机需网络互通,虚拟机外网访问正常 Centos发行版版本查看:cat /etc/centos-release root用户操作 2、禁用swap分区 Kubernetes 1.8开始要求关闭系统的Swap,可暂时关闭或永久禁用, 使用 $ free -m 确认swap是否为开启状态 $ s...

逻辑回归与scikit-learn

欢迎关注本人的微信公众号AI_Engine LogisticRegression 算法原理 一句话概括:逻辑回归假设数据服从伯努利分布,通过极大化似然函数(损失函数)的方法,运用梯度下降或其他优化算法来求解参数,来达到将数据二分类的目的。 定义:逻辑回归(Logistic Regression)是一种用于解决二分类(0 or 1)问题的机器学习方法,用于估计某种事物的可能性(不是概率)。比如某用户...

指针OR数组?用他们来表达字符串又有何不同?

cocowy的编程之旅 在学习C语言的过程中我们经常可以看到或者听到这样一句话:数组其实等价于指针,例如: 在这里可以轻松的看出输出后他们的值相等,其实在计算机内存里面,p为本地变量,有着他自己的作用域。而指针变量q保存着这个数组的首地址,通过*号指向这个地址保存的变量值。 然而我们再看一个例子: 这个时候计算机报错,这是为什么呢? 其实原因很简单,指针说指向的这个字符串的地址是位于计算机代码段地...

猜你喜欢

广度搜索

广度搜索的基本使用方法 广度搜索不同于深度搜索,是一种一步一步进行的过程,每一个点只记录一遍。需要用到队列记录每一步可以走到的位置,找到目标位置输出步数即可。 用到的知识:结构体、队列 如图 首先我们需要定义一个结构体来存储每个遍历到的点和步数 广搜不会用到递归,所以可以直接在主函数里写,这里需要定义一个结构体队列 初始化队列并将起始点入列 遍历 完整代码...

NIO Socket 编程实现tcp通信入门(二)

1、NIO简介 NIO面向通道和缓冲区进行工作,数据总是从通道读取到缓冲区中,或者从缓冲区写入到通道中。可以双向传输数据,是同步非阻塞式IO。NIO还引入了选择器机制,从而实现了一个选择器监听多个底层通道,减少了线程并发数。用NIO实现socket的Tcp通信需要掌握下面三个知识点: Buffer 缓冲区 Channel 通道 Selector 选择器   2、java.nio.Buff...

[字节码系列]ObjectWeb ASM构建Method Monitor

      在前面的篇章中,我们看到Java Instrutment的强大能力,本篇,我们将介绍如何使用ObjectWeb ASM的字节码增强能力构建Method Monitor       1.什么是ObjectWeb ASM      ObjectWeb ...

Core Location 电子围栏:入门

原文:Geofencing with Core Location: Getting Started 作者:Andy Pereira 译者:kmyhy 更新说明:Andy Pereira 将本教程升级至 Xcode 9.3 和 Swift 4.1。 Geofencing 会在设备进入/离开指定的电子围栏时通知应用程序。它可以让你写出一些很酷的应用程序,当你从家里出来时触发通知,或者在附近出现最爱的商...

Android 圆角边框RoundRect原理

绘制圆角矩形的方法 该方法来自Canvas类,rect代表矩形,rx和ry分别代表形成圆角所需要的椭圆的x和y轴半径,那么rx和ry究竟如何形成圆角呢? 形成圆角的原理 矩形的四个圆角是分别生成的,以左上角的圆角为例: 首先通过rect绘制出矩形,然后以矩形的左上角定点为起点,分别向x和y轴平移rx和ry, 得到的点为中心,以rx和ry为x和y轴的半径绘制椭圆,椭圆的坐上半部分圆弧就是圆角了。如下...