cooke和session和csrf笔记

04
六月
2021

目录

一、注册登陆案例

        1、在app01文件夹下的model.py下创建模型

        2、迁移文件,并执行迁移文件

        3、在admin后台管理当中添加数据

        4、登录流程

        5、创建登陆页面

        6、在view.py下新建类试图。返回页面

        7、添加路由

二、cookie

        工作原理

        csrf

三、session

四、前后台分离时,如何保持状态

        1、登录接口

        2、新建Login.vue页面,并点击登录按钮,获取到输入的内容

        3、为login.vue页面添加路由

        4、实现页面的登录功能

        5、登陆成功跳转页面

        6、vue中状态保存


一、注册登陆案例

状态保存

http 无状态

        1、在app01文件夹下的model.py下创建模型

from django.db import models

# Create your models here.


class User(models.Model):

    username = models.CharField(max_length=64)
    password = models.CharField(max_length=128)

    def __str__(self):
        return self.username

    class Meta:
        db_table = 'user'

        2、迁移文件,并执行迁移文件

迁移
python manage.py makemigrations

生成
python manage.py migrate

        3、在admin后台管理当中添加数据

from .models import User

admin.site.register(User)

# 创建超级用户
python manage.py createsuperuser

        4、登录流程

        5、创建登陆页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <form action="" method="post">
            {% csrf_token %}
            <p>用户名:<input type="text" name="name"></p>
            <p>密码:<input type="password" name="password"></p>
            <p><input type="submit" value="登录"></p>
        </form>
    </div>
</body>
</html>

        6、在view.py下新建类试图,返回页面

from django.shortcuts import render
from django.views import View

from .models import User
# Create your views here.


class LoginView(View):
    def get(self,request):
        return render(request,'login.html')

    def post(self,request):
        print(request.POST)
        return render(request, 'login.html')

        7、添加路由

from django.urls import path
from . import views
urlpatterns = [
    path('login/',views.LoginView.as_view())
]

http 是无状态保存 如果要状态保存,需要进行cookie或者session

如果想让浏览器记住,需要添加状态

二、cookie

CKKKIE用来解决http无状态默认请求,一次响应,然后断开

概念:用来浏览器状态保持,做会话使用

特点:

以键值对形式存在

有服务器生成,客户端保存

存储大小:4k 大概20个键值对

在进行浏览时,浏览器会自动带上cookie

缺点:

不够安全

无法跨域共享

容易被截取,不安全

from django.shortcuts import render,redirect
from django.views import View

from .models import User
# Create your views here.


class LoginView(View):
    def get(self,request):
        return render(request,'login.html')

    def post(self,request):
        print(request.POST)
        """      
        <QueryDict: {'csrfmiddlewaretoken': 
        ['r76uH1lw8eQE6lYflBJjKKZ2t5Glf0RsdQwrDx8GEzKOho7jArBwRzviCpO5Rw5N'],
        'name': ['zhangsan'], 'password': ['123456']}>
        字典:get()
        """
        # 1、获取请求提交的数据
        username = request.POST.get('username')
        password = request.POST.get('password')
        # 2、登录提交用户名,获取表中的数据,用来判断用户是否注册
        user = User.objects.filter(username=username).first()
        # 3、判断用户已注册,判断用户和密码是否正确
        if user and password == password:
            # 登陆成功跳转页面
            # 保存session
            request.session['username'] = user.username
            resp = redirect('app01:index')
            resp.set_cookie('username',user.username)
            return resp
        # 4、用户不存在,返回密码不正确
        else:
            return render(request,'login.html')


class IndexView(View):

    def get(self,request):
        if request.COOKIES.get('username'):
            return render(request,'index.html')
        else:
            return redirect(request,'app001:login')

        工作原理

        csrf

跨域请求伪造

 

csfr 最早解决银行系统安全问题

 

解决

在表单中加入csrf_token

三、session

session用来状态保持的,但是session存储在服务器上,在数据库当中,相对安全,存储大小不受限,受硬盘大小,可以有效期,django上的session有效期是15天

session 也是key value形式

session和cookie对比

session存在服务器,相对安全 cookie存在客户端当中,不安全

seddion存储大小不限 cookie存储只能是4k或者20对kay value

四、前后台分离时,如何保持状态

        1、登录接口

from django.views import View
from django.http import JsonResponse

from .models import User
# Create your views here.


class LoginView(View):
    def get(self,request):
        # return render(request,'login.html')
        return JsonResponse({'msg':'请求套路不和口味','code':400},json_dumps_params={'ensure_ascii':False})

    def post(self,request):
        print(request.POST)
        """      
        <QueryDict: {'csrfmiddlewaretoken': 
        ['r76uH1lw8eQE6lYflBJjKKZ2t5Glf0RsdQwrDx8GEzKOho7jArBwRzviCpO5Rw5N'],
        'name': ['zhangsan'], 'password': ['123456']}>
        字典:get()
        """
        # 1、获取请求提交的数据
        username = request.POST.get('username')
        password = request.POST.get('password')
        # 2、登录提交用户名,获取表中的数据,用来判断用户是否注册
        user = User.objects.filter(username=username).first()
        # 3、判断用户已注册,判断用户和密码是否正确
        if user and password == password:
            # 登陆成功,返回用户id
            return JsonResponse({'msg':'登陆成功','code':200})
        # 4、用户不存在,返回密码不正确
        else:
            # return render(request,'login.html')
            return JsonResponse({'msg': '登陆密码不正确', 'code': 400})

        2、新建Login.vue页面,并点击登录按钮,获取到输入的内容

<template>
    <div>
        <div>
            <form action="">
                <p>用户名:<input type="text" v-model="username"></p>
                <p>密码:<input type="password" v-model="password"></p>
                <!-- preven 阻止默认事件--> 
                <p><button @click.prevent="login">登录</button></p>
            </form>
        </div>
    </div>

        3、为login.vue页面添加路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Index from '@/components/Index'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/login',  // 浏览器地址栏当中输入的路径
      name: 'Login',  // 使用$router.push跳转页面时,所带的参数
      component: Login  // 跳转到路径所批定页面以后,所显示 的vue页面
    },
  ]
})

        4、实现页面的登录功能

<template>
    <div>
        <div>
            <form action="">
                <p>用户名:<input type="text" v-model="username"></p>
                <p>密码:<input type="password" v-model="password"></p>
                <!-- preven 阻止默认事件--> 
                <p><button @click.prevent="login">登录</button></p>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username:'',
            passwoed:'',
        }
    },
    methods: {
        // 登陆方法 funcitonname() {}
        login(){
            // 在这里执行这个方法逻辑
            console.log(this.username,this.passwoed)
            // 实例化表单
            let from_data = new FormData()
            // 添加数据到表单
            from_data.append('username',this.username)
            from_data.append('password',this.password)
            // 发送请求
            this.axios({
                url:'/app01/login',
                method:'post',
                data:'form_data'
            }).then(res => {
                console.log(res.data)
            })

        },
    },
    created() {

    }
}
</script>

<style scoped>

</style>

        5、登陆成功跳转页面

<template>
    <div>
        <div>
            <form action="">
                <p>用户名:<input type="text" v-model="username"></p>
                <p>密码:<input type="password" v-model="password"></p>
                <!-- preven 阻止默认事件--> 
                <p><button @click.prevent="login">登录</button></p>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username:'',
            password:'',
        }
    },
    methods: {
        // 登陆方法 funcitonname() {}
        login(){
            // 在这里执行这个方法逻辑
            console.log(this.username,this.password)
            // 实例化表单
            let from_data = new FormData()
            // 添加数据到表单
            from_data.append('username',this.username)
            from_data.append('password',this.password)
            // 发送请求
            this.axios({
                url:'/app01/login/',
                method:'post',
                data:'form_data'
            }).then(res => {
                console.log(res.data)
                // 判断是否登录成功
                if(res.data.code == 200){
                    this.$router.push({
                        name:'Index'
                    })
                }
            })

        },
    },
    created() {

    }
}
</script>

<style scoped>

</style>

        6、vue中状态保存

webstorage 前端状态保持

里面有两种方法

localStoage 永久保存数据,浏览器关闭,数据不被清空

1、setltem(key,value) 设置数据 key value形式

2、getltem(key) 获取数据,获取key,得到值

3、remove(key) 移除数据

sessionStorage 临时保存数据,浏览器关闭,数据清空

<template>
    <div>
        <div>
            <form action="">
                <p>用户名: <input type="text" v-model="username"></p>
                <p>密码: <input type="text" v-model="password"></p>
                <!-- prevent 阻止默认事件 -->
                <p><button @click.prevent="login">登录</button></p>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        // 登录方法  funcitonname () {}  
        login() {
            // 在这里执行这个方法的逻辑
            console.log(this.username, this.password)
            // 实例化表单
            let form_data = new FormData()
            // 添加数据到表单中
            form_data.append('username', this.username)
            form_data.append('password', this.password)
            // 发送请求
            this.axios({
                url: '/app01/login/',
                method: 'post',
                data: form_data
            }).then(res => {
                console.log(res.data)
                // 判断是否登录成功
                if(res.data.code == 200) {
                    // 登录成功,进行状态保持
                    localStorage.setItem('user_id', res.data.user_id)
                    // 跳转路由到首页
                    this.$router.push({
                        name: 'Index'
                    })
                }
            })

        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>

 

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员