开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Python知识库 -> 用户的登陆认证、DjangoRestFramework JWT&多条件登录导航栏实现 -> 正文阅读

[Python知识库]用户的登陆认证、DjangoRestFramework JWT&多条件登录导航栏实现

Django REST framework JWT

JWT介绍

在用户注册或登录后，我们想记录用户的登录状态，或者为用户创建身份认证的凭证。我们不再使用Session认证机制，而使用Json Web Token认证机制。

很多公司开发的一些移动端可能不支持cookie，并且我们通过cookie和session做接口登录认证的话，效率其实并不是很高，我们的接口可能提供给多个客户端，session数据保存在服务端，那么就需要每次都调用session数据进行验证，比较耗时，所以引入了token认证的概念，我们也可以通过token来完成，我们来看看jwt是怎么玩的。

Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).
该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者
和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须
的声明信息，该token也可直接被用于认证，也可被加密。

JWT的构成

JWT就一段字符串，由三段信息构成的，将这三段信息文本用.链接一起就构成了Jwt字符串。就像这样:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.
TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

第一部分我们称它为头部（header),第二部分我们称其为载荷（payload, 类似于飞机上承载的物品)，第三部分是签证（signature).

生成规则：

header

jwt的头部承载两部分信息：

声明类型，这里是jwt
声明加密的算法通常直接使用 HMAC SHA256
这就是token的第一段。

{
  'typ': 'JWT',
  'alg': 'HS256'
}

然后将头部进行base64.b64encode()加密（该加密是可以对称解密的),构成了第一部分.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

python中base64加密解密

import base64
str1 = 'admin'
str2 = str1.encode()
b1 = base64.b64encode(str2) #数据越多，加密后的字符串越长
b2 = base64.b64decode(b1) #admin
各个语言中都有base64加密解密的功能，所以我们jwt为了安全，需要配合第三段加密

payload

载荷可以存放的有效信息：

标准中注册的声明
公共的声明
私有的声明

标准中注册的声明 (建议但不强制使用) ：

iss: jwt签发者
sub: jwt所面向的用户
aud: 接收jwt的一方
exp: jwt的过期时间，这个过期时间必须要大于签发时间
nbf: 定义在什么时间之前，该jwt都是不可用的.
iat: jwt的签发时间
jti: jwt的唯一身份标识，主要用来作为一次性token,从而回避重放攻击。

公共的声明 ：公共的声明可以添加任何的信息，一般添加用户的相关信息或其他业务需要的必要信息.但不建议添加敏感信息，因为该部分在客户端可解密.

私有的声明** ：私有声明是提供者和消费者所共同定义的声明，一般不建议存放敏感信息，因为base64是对称解密的，意味着该部分信息可以归类为明文信息。

定义一个payload，json格式的数据:

{
  "sub": "1234567890",
  "exp": "3422335555", #时间戳形式
  "name": "John Doe",
  "admin": true
}

然后将其进行base64.b64encode() 加密，得到JWT的第二部分。

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9

载荷就是用来承载一些可用信息的. 标准声明中有过期日期设置等等.

signature

JWT的第三部分是一个签证信息，这个签证信息由三部分组成：

header (base64后的)
payload (base64后的)
secret密钥

这个部分需要base64加密后的header和base64加密后的payload使用.连接组成的字符串，然后通过header中声明的加密方式进行加盐secret组合加密，然后就构成了jwt的第三部分。

// javascript
var encodedString = base64UrlEncode(header) + '.' + base64UrlEncode(payload);
var signature = HMACSHA256(encodedString, 'secret'); 
// TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

将这三部分用.连接成一个完整的字符串,构成了最终的jwt:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

注意：secret是保存在服务器端的，jwt的签发生成也是在服务器端的，secret就是用来进行jwt的签发和jwt的验证，所以，它就是你服务端的私钥，在任何场景都不应该流露出去。一旦客户端得知这个secret, 那就意味着客户端是可以自我签发jwt了。

JWT的优缺点

jwt的优点：
1. 实现分布式的单点登陆非常方便
2. 数据实际保存在客户端，所以我们可以分担服务器的存储压力
3. JWT不仅可用于认证，还可用于信息交换。善用JWT有助于减少服务器请求数据库的次数，jwt的构成非常简单，字节占用很小，所以它是非常便于传输的。

jwt的缺点：
1. 数据保存在了客户端，我们服务端只认jwt，不识别客户端。
2. jwt可以设置过期时间，但是因为数据保存在了客户端，所以对于过期时间不好调整。#secret_key轻易不要改，一改所有客户端都要重新登录

在这里插入图片描述

安装配置JWT

pip install djangorestframework-jwt -i https://mirrors.aliyun.com/pypi/simple/

配置(github网址：https://github.com/jpadilla/django-rest-framework-jwt)

REST_FRAMEWORK = {
    # 异常处理
    'EXCEPTION_HANDLER': 'lyapi.utils.myexceptionhandler.custom_exception_handler',
    'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
'rest_framework.authentication.SessionAuthentication',
'rest_framework.authentication.BasicAuthentication',
    ),
}
import datetime
JWT_AUTH = {
    # 'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
    #JWT_EXPIRATION_DELTA 指明token的有效期
    'JWT_EXPIRATION_DELTA': datetime.timedelta(seconds=30),
    'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler',
    'JWT_ALLOW_REFRESH': True,  # 自动刷新token值
}

代码实现

import jwt
import datetime
from jwt import exceptions
SALT = 'iv%x6xo7l7_u9bf_u!9#g#m*)*=ej@bek5)(@u3kh*72+unjv='
def create_token():
    # 构造header
    headers = {
        'typ': 'jwt',
        'alg': 'HS256'
    }
    # 构造payload
    payload = {
        'user_id': 1, # 自定义用户ID
        'username': 'wupeiqi', # 自定义用户名
        'exp': datetime.datetime.utcnow() + datetime.timedelta(minutes=5) # 超时时间
    }
    result = jwt.encode(payload=payload, key=SALT, algorithm="HS256", headers=headers).decode('utf-8')
    return result
if __name__ == '__main__':
    token = create_token()
    print(token)

jwt校验token

一般在认证成功后，把jwt生成的token返回给用户，以后用户再次访问时候需要携带token，此时jwt需要对token进行超时及合法性校验。

获取token之后，会按照以下步骤进行校验：

将token分割成 header_segment、payload_segment、crypto_segment 三部分

jwt_token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"

signing_input, crypto_segment = jwt_token.rsplit(b'.', 1)
header_segment, payload_segment = signing_input.split(b'.', 1)

对第一部分header_segment进行base64url解密，得到header
对第二部分payload_segment进行base64url解密，得到payload
对第三部分crypto_segment进行base64url解密，得到signature
对第三部分signature部分数据进行合法性校验
- 拼接前两段密文，即：signing_input
- 从第一段明文中获取加密算法，默认：HS256
- 使用算法+盐对signing_input 进行加密，将得到的结果和signature密文进行比较。

import jwt
import datetime
from jwt import exceptions
def get_payload(token):
    """
    根据token获取payload
    :param token:
    :return:
    """
    try:
        # 从token中获取payload【不校验合法性】
        # unverified_payload = jwt.decode(token, None, False)
        # print(unverified_payload)
        # 从token中获取payload【校验合法性】
        verified_payload = jwt.decode(token, SALT, True)
        return verified_payload
    except exceptions.ExpiredSignatureError:
        print('token已失效')
    except jwt.DecodeError:
        print('token认证失败')
    except jwt.InvalidTokenError:
        print('非法的token')
if __name__ == '__main__':
    token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NzM1NTU1NzksInVzZXJuYW1lIjoid3VwZWlxaSIsInVzZXJfaWQiOjF9.xj-7qSts6Yg5Ui55-aUOHJS4KSaeLq5weXMui2IIEJU"
    payload = get_payload(token)

用户的登陆认证

前端显示登陆页面

登录页组件

src/components/Login.vue

<template>
	<div class="login box">
		<img src="../../static/image/Loginbg.3377d0c.jpg" alt="">
		<div class="login">
			<div class="login-title">
				<img src="../../static/image/Logotitle.1ba5466.png" alt="">
				<p>帮助有志向的年轻人通过努力学习获得体面的工作和生活!</p>
			</div>
			<div class="login_box">
				<div class="title">
					<span @click="login_type=0">密码登录</span>
					<span @click="login_type=1">短信登录</span>
				</div>
				<div class="inp" v-if="login_type==0">
					<input @blur="check_username" v-model = "username" type="text" placeholder="用户名 / 手机号码" class="user">
					<input v-model = "password" type="password" name="" class="pwd" placeholder="密码">
					<div id="geetest1"></div>
					<div class="rember">
						<p>
							<input v-model="remember_me" type="checkbox" class="no" name="a"/>
							<span>记住密码</span>
						</p>
						<p>忘记密码</p>
					</div>
					<button id="TencentCaptcha" data-appid="appId" data-cbfn="callback" type="button" class="login_btn" @click="show_captcha">登录</button>
					<p class="go_login" >没有账号 <router-link to="/register"><span>立即注册</span></router-link></p>
				</div>
				<div class="inp" v-show="login_type==1">
					<input v-model = "username" type="text" placeholder="手机号码" class="user">
					<input v-model = "password"  type="text" class="pwd" placeholder="短信验证码">
          <button id="get_code">获取验证码</button>
					<button class="login_btn">登录</button>
					<p class="go_login" >没有账号 <router-link to="/register"><span>立即注册</span></router-link></p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
  name: 'Login',
  data(){
    return {
        login_type: 0,  // 切换登录方式的
        username:"",
        password:"",
        remember_me:false,
    }
  },
  methods:{
    check_username(){
      if (!this.username.trim()){
        this.$message.error('用户名不能为空');
      }
    },
    // 用户名、密码登录
    show_captcha(){
      var captcha1 = new TencentCaptcha(`${this.$settings.captcha_id}`, (res) =>{
        console.log(res);
        if (res.ret === 0 ){
          this.loginHandler(res.ticket,res.randstr);
        }
      });
      captcha1.show(); // 显示验证码
    },
    loginHandler(ticket,randstr){
      console.log(this.remember_me);
this.$axios.post(`${this.$settings.host}/users/login/`,{
        username:this.username,
        password:this.password,
        // 滑动验证的票据
        ticket:ticket,
        randstr:randstr,
      })
      .then((res)=>{
        console.log(res);
        // 存储token数据
        if (this.remember_me){
          localStorage.token = res.data.token;
          localStorage.user_id = res.data.id;
          localStorage.username = res.data.username;
          sessionStorage.removeItem('token');
          sessionStorage.removeItem('user_id');
          sessionStorage.removeItem('username');
        }else {
          sessionStorage.token = res.data.token;
          sessionStorage.user_id = res.data.id;
          sessionStorage.username = res.data.username;
          localStorage.removeItem("token");
          localStorage.removeItem("user_id");
          localStorage.removeItem("username");
        }
        // location.href = '/home'
        // this.$router.push('/');  // 效果同上
        this.$confirm('你想跳转到哪?', '登录成功', {
          confirmButtonText: '去首页',
          cancelButtonText: '去狗急了',
          type: 'warning'
        }).then(() => {
          this.$router.push('/');
        }).catch(() => {
          // this.$router.push('/goujile');
          location.href = 'http://www.baidu.com'
        });
      })
      .catch((error)=>{
        // console.log(error.response);
        // alert('用户名或者密码有误！请重新输入！')
        this.$message.error('用户名或者密码有误！请重新输入！');
      })
    },
  },
};
</script>
<style scoped>
.box{
	width: 100%;
  height: 100%;
	position: relative;
  overflow: hidden;
}
.box img{
	width: 100%;
  min-height: 100%;
}
.box .login {
	position: absolute;
	width: 500px;
	height: 400px;
	top: 0;
	left: 0;
  margin: auto;
  right: 0;
  bottom: 0;
  top: -338px;
}
.login .login-title{
     width: 100%;
    text-align: center;
}
.login-title img{
    width: 190px;
    height: auto;
}
.login-title p{
    font-family: PingFangSC-Regular;
    font-size: 18px;
    color: #fff;
    letter-spacing: .29px;
    padding-top: 10px;
    padding-bottom: 50px;
}
.login_box{
    width: 400px;
    height: auto;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
    border-radius: 4px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.login_box .title{
	font-size: 20px;
	color: #9b9b9b;
	letter-spacing: .32px;
	border-bottom: 1px solid #e6e6e6;
	 display: flex;
    	justify-content: space-around;
    	padding: 50px 60px 0 60px;
    	margin-bottom: 20px;
    	cursor: pointer;
}
.login_box .title span:nth-of-type(1){
	color: #4a4a4a;
    	border-bottom: 2px solid #84cc39;
}
.inp{
	width: 350px;
	margin: 0 auto;
}
.inp input{
    border: 0;
    outline: 0;
    width: 100%;
    height: 45px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    text-indent: 20px;
    font-size: 14px;
    background: #fff !important;
}
.inp input.user{
    margin-bottom: 16px;
}
.inp .rember{
     display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 10px;
}
.inp .rember p:first-of-type{
    font-size: 12px;
    color: #4a4a4a;
    letter-spacing: .19px;
    margin-left: 22px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    /*position: relative;*/
}
.inp .rember p:nth-of-type(2){
    font-size: 14px;
    color: #9b9b9b;
    letter-spacing: .19px;
    cursor: pointer;
}
.inp .rember input{
    outline: 0;
    width: 30px;
    height: 45px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    text-indent: 20px;
    font-size: 14px;
    background: #fff !important;
}
.inp .rember p span{
    display: inline-block;
  font-size: 12px;
  width: 100px;
  /*position: absolute;*/
/*left: 20px;*/

}
#geetest{
	margin-top: 20px;
}
.login_btn{
     width: 100%;
    height: 45px;
    background: #84cc39;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    letter-spacing: .26px;
    margin-top: 30px;
}
.inp .go_login{
    text-align: center;
    font-size: 14px;
    color: #9b9b9b;
    letter-spacing: .26px;
    padding-top: 20px;
}
.inp .go_login span{
    color: #84cc39;
    cursor: pointer;
}
</style>

绑定登陆页面路由地址

src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import settings from "./settings";
import '../static/css/reset.css'
import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// import '../static/js/tcaptcha'
Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.$settings=settings
Vue.prototype.$axios = axios
// 客户端配置是否允许ajax发送请求时附带cookie，false表示不允许
axios.defaults.withCredentials = false;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

前端实现登陆功能

在登陆组件中找到登陆按钮，绑定点击事件

<button class="login_btn" @click="loginhander">登录</button>

在methods中请求后端

export default {
  name: 'Login',
  data(){
    return {
        login_type: 0,
        remember:false, // 记住密码
        username:"",
        password:"",
    }
  },
  methods:{
    // 登录
    loginhander(){
		this.$axios.post("http://127.0.0.1:8000/users/authorizations/",{"username":this.username,"password":this.password}).then(response=>{
        console.log(response.data)
      }).catch(error=>{
        console.log(error)
      })
    }
  },
};

前端保存jwt

我们可以将JWT保存在cookie中，也可以保存在浏览器的本地存储里，我们保存在浏览器本地存储中

浏览器的本地存储提供了sessionStorage 和 localStorage 两种，从属于window对象：

sessionStorage 浏览器关闭即失效
localStorage 长期有效
lyweb/src/components/Login.vue

<script>
export default {
  name: 'Login',
  data(){
    return {
        login_type: 0,  // 切换登录方式的
        username:"",
        password:"",
        remember_me:false,
    }
  },
  methods:{
    check_username(){
      if (!this.username.trim()){
        this.$message.error('用户名不能为空');
      }
    },
    // 用户名、密码登录
    show_captcha(){
      var captcha1 = new TencentCaptcha(`${this.$settings.captcha_id}`, (res) =>{
        console.log(res);
        if (res.ret === 0 ){
          this.loginHandler(res.ticket,res.randstr);
        }
      });
      captcha1.show(); // 显示验证码
    },
    loginHandler(ticket,randstr){
      console.log(this.remember_me);
this.$axios.post(`${this.$settings.host}/users/login/`,{
        username:this.username,
        password:this.password,
        // 滑动验证的票据
        ticket:ticket,
        randstr:randstr,
      })
      .then((res)=>{
        console.log(res);
        // 存储token数据
        if (this.remember_me){
          localStorage.token = res.data.token;
          localStorage.user_id = res.data.id;
          localStorage.username = res.data.username;
          sessionStorage.removeItem('token');
          sessionStorage.removeItem('user_id');
          sessionStorage.removeItem('username');
        }else {
          sessionStorage.token = res.data.token;
          sessionStorage.user_id = res.data.id;
          sessionStorage.username = res.data.username;
          localStorage.removeItem("token");
          localStorage.removeItem("user_id");
          localStorage.removeItem("username");
        }
        // location.href = '/home'
        // this.$router.push('/');  // 效果同上
        this.$confirm('你想跳转到哪?', '登录成功', {
          confirmButtonText: '去首页',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/');
        }).catch(() => {
          // this.$router.push('/goujile');
          location.href = '/login'
        });
      })
      .catch((error)=>{
        // console.log(error.response);
        // alert('用户名或者密码有误！请重新输入！')
        this.$message.error('用户名或者密码有误！请重新输入！');
      })
    },
  },
};
</script>

登录状态的判断和退出登录

Header.vue

<template>
  <div class="total-header">
    <div class="header">
      <el-container>
        <el-header height="80px" class="header-cont">
          <el-row>
            <el-col class="logo" :span="3">
              <a href="/">
                <img src="@/assets/head-logo.svg" alt="">

              </a>
            </el-col>
            <el-col class="nav" :span="10">
              <el-row>
                <el-col :span="4" v-for="(top_nav, index) in  nav_top_list" :key="top_nav.id">

                  <router-link :to="top_nav.link"  v-if="!top_nav.is_site">{{top_nav.title}}</router-link>
                  <a :href="top_nav.link" target="_blank" v-else>{{top_nav.title}}</a>
                </el-col>

              </el-row>

            </el-col>
            <el-col :span="11" class="header-right-box">
              <div class="search">
                <input type="text" id="Input" placeholder="请输入想搜索的课程" style="" @blur="inputShowHandler" ref="Input"
                       v-show="!s_status">
                <ul @click="ulShowHandler" v-show="s_status" class="search-ul">
                  <span>Python</span>
                  <span>Linux</span>
                </ul>
                <p>
                  <img class="icon" src="@/assets/sousuo1.png" alt="" v-show="s_status">
                  <img class="icon" src="@/assets/sousuo2.png" alt="" v-show="!s_status">
                  <img class="new" src="@/assets/new.png" alt="">
                </p>
              </div>
              <div class="register" v-show="!token">
                <router-link to="/login">
                  <button class="signin">登录</button>
                </router-link>
                &nbsp;&nbsp;|&nbsp;&nbsp;
                <a target="_blank" href="https://www.luffycity.com/signup">
                  <router-link to="/register">
                    <button class="signup">注册</button>
                  </router-link>

                </a>
              </div>
              <div class="shop-car" v-show="token">
                <router-link to="/cart">
                  <b>{{xx}}</b>
<!--                  <b>{{$Store.state.cart.cart_length}}</b>-->
                  <img src="@/assets/shopcart.png" alt="">
                  <span>购物车 </span>
                </router-link>
              </div>
              <div class="nav-right-box" v-show="token">
                <div class="nav-right">
                  <router-link to="/myclass">
                    <div class="nav-study">我的教室</div>
                  </router-link>
                  <div class="nav-img" @mouseover="personInfoList" @mouseout="personInfoOut">
                    <img src="@/assets/touxiang.png" alt="" style="border: 1px solid rgb(243, 243, 243);">
                    <ul class="home-my-account" v-show="list_status" @mouseover="personInfoList">
                      <li>
                        我的账户
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                        我的订单
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                        贝里小卖铺
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                        我的优惠券
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                    <span>
                      我的消息
                      <b>(26)</b>
                    </span>
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li @click="logout">
                        退出
                        <img src="@/assets/back.svg" alt="">
                      </li>

                    </ul>
                  </div>

                </div>

              </div>


            </el-col>
          </el-row>

        </el-header>


      </el-container>

    </div>
  </div>

</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      // 设置一个登录状态的标记，因为登录注册部分在登录之后会发生变化
      token: false,  //  false  -- not login     true -- login
      s_status: true, // 控制放大镜颜色切换
      list_status: false, // 控制个人中心下拉菜单是否显示
      nav_top_list:[],
      where:0, // 记录token的存放位置
    }
  },
  props:['xx',],
  methods: {
    logout(){
      sessionStorage.removeItem('token');
      sessionStorage.removeItem('user_id');
      sessionStorage.removeItem('username');
      localStorage.removeItem("token");
      localStorage.removeItem("user_id");
      localStorage.removeItem("username");
      this.token = false;
    },
    checklogin(){
      if (localStorage.token){

        this.token = localStorage.token
        this.where = 1;
      }
      else if (sessionStorage.token){
        this.token = sessionStorage.token
        this.where = 0;
      }else {

        return false;

      }
      // this.token = localStorage.token || sessionStorage.token;
      this.$axios.post(`${this.$settings.host}/users/verify_token/`,{
        token:this.token,
      })
      .then((res)=>{
        if (this.where === 0){
          sessionStorage.token = res.data.token;
        }else {
          localStorage.token = res.data.token;
        }
      })
      .catch((error)=>{
        this.$confirm('请重新登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/login');
        }).catch(()=>{
          this.token = false;
        })
      })

    },
    ulShowHandler() {
      this.s_status = false;
      // console.log(this.$refs.Input);

      // this.$refs.Input.focus();
      this.$nextTick(() => {  //延迟回调方法，Vue中DOM更新是异步的,也就是说让Vue去显示我们的input标签的操作是异步的，如果我们直接执行this.$refs.Input.focus();是不行的，因为异步的去显示input标签的操作可能还没有完成，所有我们需要等它完成之后在进行DOM的操作，需要借助延迟回调对DOM进行操作，这是等这次操作对应的所有Vue中DOM的更新完成之后，在进行nextTick的操作。
        this.$refs.Input.focus();
      })

    },
    inputShowHandler() {
      // console.log('xxxxx')

      this.s_status = true;
    },
    personInfoList() {
      this.list_status = true;
    },
    personInfoOut() {
      this.list_status = false;
    },
    get_nav_data(){
      this.$axios.get(`${this.$settings.host}/home/nav/top`)
      .then((res)=>{
        this.nav_top_list = res.data;

      })
      .catch((error)=>{

      })
    },
  },
  created(){
    this.get_nav_data();
    this.checklogin();
    // let cart_length = sessionStorage.cart_length;
    // this.$store.commit('add_cart',cart_length)
  }

}


</script>

<style scoped>
.header-cont .nav .active {
  color: #f5a623;
  font-weight: 500;
  border-bottom: 2px solid #f5a623;
}

.total-header {
  min-width: 1200px;
  z-index: 100;
  box-shadow: 0 4px 8px 0 hsla(0, 0%, 59%, .1);
}

.header {
  width: 1200px;
  margin: 0 auto;
}

.header .el-header {
  padding: 0;
}

.logo {
  height: 80px;
  /*line-height: 80px;*/
  /*text-align: center;*/
  display: flex; /* css3里面的弹性布局，高度设定好之后，设置这个属性就能让里面的内容居中 */
  align-items: center;
}

.nav .el-row .el-col {
  height: 80px;
  line-height: 80px;
  text-align: center;

}

.nav a {
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  color: #4a4a4a;
  text-decoration: none;
}

.nav .el-row .el-col a:hover {
  border-bottom: 2px solid #f5a623
}

.header-cont {
  position: relative;
}

.search input {
  width: 185px;
  height: 26px;
  font-size: 14px;
  color: #4a4a4a;
  border: none;
  border-bottom: 1px solid #ffc210;

  outline: none;
}

.search ul {
  width: 185px;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0;

  padding-bottom: 3px;
  border-bottom: 1px solid hsla(0, 0%, 59%, .25);
  cursor: text;
  margin: 0;
  font-family: Helvetica Neue, Helvetica, Microsoft YaHei, Arial, sans-serif;
}

.search .search-ul, .search #Input {
  padding-top: 10px;
}

.search ul span {
  color: #545c63;
  font-size: 12px;
  padding: 3px 12px;
  background: #eeeeef;
  cursor: pointer;
  margin-right: 3px;
  border-radius: 11px;
}

.hide {
  display: none;
}

.search {
  height: auto;
  display: flex;
}

.search p {
  position: relative;
  margin-right: 20px;
  margin-left: 4px;
}

.search p .icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.search p .new {
  width: 18px;
  height: 10px;
  position: absolute;
  left: 15px;
  top: 0;
}

.register {
  height: 36px;
  display: flex;
  align-items: center;
  line-height: 36px;
}

.register .signin, .register .signup {
  font-size: 14px;
  color: #5e5e5e;
  white-space: nowrap;
}

.register button {
  outline: none;
  cursor: pointer;
  border: none;
  background: transparent;
}

.register a {
  color: #000;
  outline: none;
}

.header-right-box {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #4a4a4a;
  position: absolute;
  right: 0;
  top: 0;
}

.shop-car {
  width: 99px;
  height: 28px;
  border-radius: 15px;
  margin-right: 20px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.shop-car b {
  position: absolute;
  left: 28px;
  top: -1px;
  width: 18px;
  height: 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 350;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #ff0826;
  overflow: hidden;
  transform: scale(.8);
}

.shop-car img {
  width: 20px;
  height: 20px;
  margin-right: 7px;
}

.nav-right-box {
  position: relative;
}

.nav-right-box .nav-right {
  float: right;
  display: flex;
  height: 100%;
  line-height: 60px;
  position: relative;
}

.nav-right .nav-study {
  font-size: 15px;
  font-weight: 300;
  color: #5e5e5e;
  margin-right: 20px;
  cursor: pointer;

}

.nav-right .nav-study:hover {
  color: #000;
}

.nav-img img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.home-my-account {
  position: absolute;
  right: 0;
  top: 60px;
  z-index: 101;
  width: 190px;
  height: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 #d0d0d0;
}

li {
  list-style: none;
}

.home-my-account li {
  height: 40px;
  font-size: 14px;
  font-weight: 300;
  color: #5e5e5e;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.home-my-account li img {
  cursor: pointer;
  width: 5px;
  height: 10px;
}

.home-my-account li span {
  height: 40px;
  display: flex;
  align-items: center;
}

.home-my-account li span b {
  font-weight: 300;
  margin-top: -2px;
}


</style>

后端实现登陆认证

JWT前置铺垫

Django默认已经提供了认证系统Auth模块，我们认证的时候，会使用auth模块里面给我们提供的表。认证系统包含：

用户管理
权限
用户组
密码哈希系统
用户登录或内容显示的表单和视图
一个可插拔的后台系统 admin

Django默认用户的认证机制依赖Session机制，我们在项目中将引入JWT认证机制，将用户的身份凭据存放在Token中，然后对接Django的认证系统，帮助我们来实现

用户的数据模型
用户密码的加密与验证
用户的权限系统

Django用户模型类

Django认证系统中提供了用户模型类User保存用户的数据，默认的User包含以下常见的基本字段：
在这里插入图片描述
上面缺少一些字段，所以后面我们会对它进行改造，比如说它里面没有手机号字段，后面我们需要加上。

常用方法：

set_password(raw_password)
- 设置用户的密码为给定的原始字符串，并负责密码的。不会保存User 对象。当None为raw_password 时，密码将设置为一个不可用的密码。
check_password(raw_password)
- 如果给定的raw_password是用户的真实密码，则返回True，可以在校验用户密码时使用。

管理器方法：

管理器方法即可以通过User.objects. 进行调用的方法。

create_user(username, email=None, password=None, **extra_fields)
- 创建、保存并返回一个User对象。
create_superuser(username, email, password, **extra_fields)
- 与create_user() 相同，但是设置is_staff 和is_superuser 为True。

项目中创建用户模块的子应用

python manage.py startapp users

在 lyapi/settings/dev.py文件中注册子应用。

INSTALLED_APPS = [
		...
  	'users',
]

创建自定义的用户模型类

Django认证系统中提供的用户模型类及方法很方便，我们可以使用这个模型类，但是字段有些无法满足项目需求，如本项目中需要保存用户的手机号，需要给模型类添加额外的字段。

Django提供了django.contrib.auth.models.AbstractUser用户抽象模型类允许我们继承，扩展字段来使用Django认证系统的用户模型类。

我们可以在apps中创建Django应用users，并在配置文件中注册users应用。

在创建好的应用models.py中定义用户的用户模型类。目前我们是将所有用户都放到一个表里面的，比如管理员，老师(上传课程)，客户等等，以后我们通过用户组进行用户划分

from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.
# 让Xadmin使用的用户表和我们项目使用的用户表是一套用户表
class User(AbstractUser):
    wechat = models.CharField(max_length=32)
    phone = models.CharField(max_length=16)

    class Meta:
        db_table = 'ly_user'
        verbose_name = '用户信息'
        verbose_name_plural = verbose_name

我们自定义的用户模型类还不能直接被Django的认证系统所识别，需要在配置文件中告知Django认证系统使用我们自定义的模型类。
lyapi/settings/dev.py

# django全局配置中AUTH_USER_MODEL
from django.conf import global_settings
# 这个配置是指不要在使用auth.User表而是使用users.User表
# 可以和Django登录认证功能自动生成的表和我们users生成的表合成一张表
AUTH_USER_MODEL = 'users.User'

AUTH_USER_MODEL 参数的设置以点.来分隔，表示应用名.模型类名。
注意：Django建议我们对于AUTH_USER_MODEL参数的设置一定要在第一次数据库迁移之前就设置好，否则后续使用可能出现未知错误。
执行数据库迁移

python manage.py makemigrations
python manage.py migrate

如果在第一次数据迁移以后，才设置AUTH_USER_MODEL自定义用户模型，则会报错。解决方案如下：

0. 先把现有的数据库导出备份，然后清掉数据库中所有的数据表。
1. 把开发者创建的所有子应用下面的migrations目录下除了__init__.py以外的所有迁移文件，只要涉及到用户的，一律删除,并将django-migrations表中的数据全部删除。
2. 把django.contrib.admin.migrations目录下除了__init__.py以外的所有迁移文件，全部删除。
3. 把django.contrib.auth.migrations目录下除了__init__.py以外的所有迁移文件，全部删除。
4. 把reversion.migrations目录下除了__init__.py以外的所有迁移文件，全部删除。这个不在django目录里面，在site-packages里面，是xadmin安装的时候带的，它会记录用户信息，也需要删除
5. 把xadmin.migrations目录下除了__init__.py以外的所有迁移文件，全部删除。
6. 删除我们当前数据库中的所有表
7. 接下来，执行数据迁移(makemigrations和migrate)，回顾第0步中的数据，将数据导入就可以了，以后如果要修改用户相关数据，不需要重复本次操作，直接数据迁移即可。

项目中安装配置JWT

pip install djangorestframework-jwt -i https://mirrors.aliyun.com/pypi/simple/

配置(github网址：https://github.com/jpadilla/django-rest-framework-jwt)

lyapi/settings/dev.py

REST_FRAMEWORK = {
    # 异常处理
    'EXCEPTION_HANDLER': 'lyapi.utils.myexceptionhandler.custom_exception_handler',
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.BasicAuthentication',
    ),
}
import datetime
JWT_AUTH = {
    # JWT_EXPIRATION_DELTA 指明token的有效期
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=30),
    'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler',
    'JWT_ALLOW_REFRESH': True,  # 自动刷新token值
}

我们django创建项目的时候，在settings配置文件中直接就给生成了一个serect_key，我们直接可以使用它作为我们jwt的serect_key,其实djangorestframework-jwt默认配置中就使用的它。

登陆认证接口

Django REST framework JWT提供了登录获取token的视图，可以直接使用
lyapi/users/urls.py

from rest_framework_jwt.views import obtain_jwt_token
urlpatterns = [
    path(r'login/', obtain_jwt_token),
]

主路由lyapi/urls.py

rom xadmin.plugins import xversion
xversion.register_models()
urlpatterns = [
	...
    path(r'users/', include('users.urls')),
]

默认的返回值仅有token，我们还需在返回值中增加username和id，方便在客户端页面中显示当前登陆用户

通过修改该视图的返回值可以完成我们的需求。
lyapi/users/utils.py

def jwt_response_payload_handler(token, user=None, request=None):
    """
    自定义jwt认证成功返回数据
    """
    return {
        'token': token,
        'id': user.id,
        'username': user.username
    }

lyapi/settings/dev.py

import datetime
JWT_AUTH = {
    # 'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=30),
    'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler',
    'JWT_ALLOW_REFRESH': True,  # 自动刷新token值
}

多条件登录

JWT扩展的登录视图，在收到用户名与密码时，也是调用Django的认证系统中提供的authenticate()来检查用户名与密码是否正确。
我们可以通过修改Django认证系统的认证后端（主要是authenticate方法）来支持登录账号既可以是用户名也可以是手机号。

修改Django认证系统的认证后端需要继承django.contrib.auth.backends.ModelBackend，并重写authenticate方法

authenticate(self, request, username=None, password=None, **kwargs)方法的参数说明：

request 本次认证的请求对象
username 本次认证提供的用户账号
password 本次认证提供的密码

我们想要让用户既可以以用户名登录，也可以以手机号登录，那么对于authenticate方法而言，username参数即表示用户名或者手机号。
重写authenticate方法的思路：

根据username参数查找用户User对象，username参数可能是用户名，也可能是手机号
若查找到User对象，调用User对象的check_password方法检查密码是否正确

users/utils.py

def get_user_obj_bu_account(account):
    """
        根据帐号获取user对象
        :param account: 账号，可以是用户名，也可以是手机号
        :return: User对象 或者 None
    """
    try:
        # 取到请求过来的用户名或手机号
        user = models.User.objects.get(Q(username=account) | Q(phone=account))
        # 返回查到的第一条数据，如果没查到返回null
        # user.first()
        return user
    # models.User.DoesNotExist是数据库中的一个错误类
    except models.User.DoesNotExist:
        return None

from . import models
from django.db.models import Q
from django.contrib.auth.backends import ModelBackend


class CustomModelBackend(ModelBackend):

    def authenticate(self, request, username=None, password=None, **kwargs):
        # username可能是手机号，可能是用户名
        # requests.post()
        ticket = kwargs.get('ticket')
        # 获取不到ticket表示xadmin登录认证
        # xadmin直接走父类的authenticate不走自定义的
        if ticket:
            randstr = kwargs.get('randstr')
            user_ip = request.META.get('REMOTE_ADDR')
            ret = txrequest(ticket, randstr, user_ip)
            # print('1111111', ticket, randstr, user_ip)
            if ret:
                user = get_user_obj_bu_account(username)
                if user:

                    if user.check_password(password):
                        return user
        else:
            ret = super().authenticate(request, username=username, password=password, **kwargs)
            return ret

在配置文件settings/dev.py中告知Django使用我们自定义的认证后端

AUTHENTICATION_BACKENDS = ['users.utils.CustomModelBackend']

前端首页实现登陆状态的判断和退出登录

common/Header.vue

<template>
  <div class="total-header">
    <div class="header">
      <el-container>
        <el-header height="80px" class="header-cont">
          <el-row>
            <el-col class="logo" :span="3">
              <a href="/">
                <img src="@/assets/head-logo.svg" alt="">
              </a>
            </el-col>
            <el-col class="nav" :span="10">
              <el-row>
                <el-col :span="4" v-for="(top_nav, index) in  nav_top_list" :key="top_nav.id">
                  <router-link :to="top_nav.link"  v-if="!top_nav.is_site">{{top_nav.title}}</router-link>
                  <a :href="top_nav.link" target="_blank" v-else>{{top_nav.title}}</a>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="11" class="header-right-box">
              <div class="search">
                <input type="text" id="Input" placeholder="请输入想搜索的课程" style="" @blur="inputShowHandler" ref="Input"
                       v-show="!s_status">
                <ul @click="ulShowHandler" v-show="s_status" class="search-ul">
                  <span>Python</span>
                  <span>Linux</span>
                </ul>
                <p>
                  <img class="icon" src="@/assets/sousuo1.png" alt="" v-show="s_status">
                  <img class="icon" src="@/assets/sousuo2.png" alt="" v-show="!s_status">
                  <img class="new" src="@/assets/new.png" alt="">
                </p>
              </div>
              <div class="register" v-show="!token">
                <router-link to="/login">
                  <button class="signin">登录</button>
                </router-link>
                &nbsp;&nbsp;|&nbsp;&nbsp;
                <a target="_blank" href="https://www.luffycity.com/signup">
                  <router-link to="/register">
                    <button class="signup">注册</button>
                  </router-link>
                </a>
              </div>
              <div class="shop-car" v-show="token">
                <router-link to="/cart">
                  <b>{{xx}}</b>
<!--                  <b>{{$Store.state.cart.cart_length}}</b>-->
                  <img src="@/assets/shopcart.png" alt="">
                  <span>购物车 </span>
                </router-link>
              </div>
              <div class="nav-right-box" v-show="token">
                <div class="nav-right">
                  <router-link to="/myclass">
                    <div class="nav-study">我的教室</div>
                  </router-link>
                  <div class="nav-img" @mouseover="personInfoList" @mouseout="personInfoOut">
                    <img src="@/assets/touxiang.png" alt="" style="border: 1px solid rgb(243, 243, 243);">
                    <ul class="home-my-account" v-show="list_status" @mouseover="personInfoList">
                      <li>
                        我的账户
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                        我的订单
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                        贝里小卖铺
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                        我的优惠券
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                    <span>
                      我的消息
                      <b>(26)</b>
                    </span>
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li @click="logout">
                        退出
                        <img src="@/assets/back.svg" alt="">
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-header>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      // 设置一个登录状态的标记，因为登录注册部分在登录之后会发生变化
      token: false,  //  false  -- not login     true -- login
      s_status: true, // 控制放大镜颜色切换
      list_status: false, // 控制个人中心下拉菜单是否显示
      nav_top_list:[],
      where:0, // 记录token的存放位置
    }
  },
  props:['xx',],
  methods: {
  	// 退出登录
    logout(){
      sessionStorage.removeItem('token');
      sessionStorage.removeItem('user_id');
      sessionStorage.removeItem('username');
      localStorage.removeItem("token");
      localStorage.removeItem("user_id");
      localStorage.removeItem("username");
      this.token = false;
    },
    checklogin(){
      if (localStorage.token){
        this.token = localStorage.token
        this.where = 1;
      }
      else if (sessionStorage.token){
        this.token = sessionStorage.token
        this.where = 0;
      }else {
        return false;
      }
      // this.token = localStorage.token || sessionStorage.token;
      this.$axios.post(`${this.$settings.host}/users/verify_token/`,{
        token:this.token,
      })
      .then((res)=>{
        if (this.where === 0){
          sessionStorage.token = res.data.token;
        }else {
          localStorage.token = res.data.token;
        }
      })
      .catch((error)=>{
        this.$confirm('请重新登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/login');
        }).catch(()=>{
          this.token = false;
        })
      })
    },
    ulShowHandler() {
      this.s_status = false;
      // console.log(this.$refs.Input);
      // this.$refs.Input.focus();
      this.$nextTick(() => {  //延迟回调方法，Vue中DOM更新是异步的,也就是说让Vue去显示我们的input标签的操作是异步的，如果我们直接执行this.$refs.Input.focus();是不行的，因为异步的去显示input标签的操作可能还没有完成，所有我们需要等它完成之后在进行DOM的操作，需要借助延迟回调对DOM进行操作，这是等这次操作对应的所有Vue中DOM的更新完成之后，在进行nextTick的操作。
        this.$refs.Input.focus();
      })
    },
    inputShowHandler() {
      // console.log('xxxxx')
      this.s_status = true;
    },
    personInfoList() {
      this.list_status = true;
    },
    personInfoOut() {
      this.list_status = false;
    },
    get_nav_data(){
      this.$axios.get(`${this.$settings.host}/home/nav/top`)
      .then((res)=>{
        this.nav_top_list = res.data;
      })
      .catch((error)=>{
      })
    },
  },
  created(){
    this.get_nav_data();
    this.checklogin();
    // let cart_length = sessionStorage.cart_length;
    // this.$store.commit('add_cart',cart_length)
  }
}
</script>
<style scoped>
.header-cont .nav .active {
  color: #f5a623;
  font-weight: 500;
  border-bottom: 2px solid #f5a623;
}
.total-header {
  min-width: 1200px;
  z-index: 100;
  box-shadow: 0 4px 8px 0 hsla(0, 0%, 59%, .1);
}
.header {
  width: 1200px;
  margin: 0 auto;
}
.header .el-header {
  padding: 0;
}
.logo {
  height: 80px;
  /*line-height: 80px;*/
  /*text-align: center;*/
  display: flex; /* css3里面的弹性布局，高度设定好之后，设置这个属性就能让里面的内容居中 */
  align-items: center;
}
.nav .el-row .el-col {
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.nav a {
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  color: #4a4a4a;
  text-decoration: none;
}
.nav .el-row .el-col a:hover {
  border-bottom: 2px solid #f5a623
}
.header-cont {
  position: relative;
}
.search input {
  width: 185px;
  height: 26px;
  font-size: 14px;
  color: #4a4a4a;
  border: none;
  border-bottom: 1px solid #ffc210;
  outline: none;
}
.search ul {
  width: 185px;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid hsla(0, 0%, 59%, .25);
  cursor: text;
  margin: 0;
  font-family: Helvetica Neue, Helvetica, Microsoft YaHei, Arial, sans-serif;
}
.search .search-ul, .search #Input {
  padding-top: 10px;
}
.search ul span {
  color: #545c63;
  font-size: 12px;
  padding: 3px 12px;
  background: #eeeeef;
  cursor: pointer;
  margin-right: 3px;
  border-radius: 11px;
}
.hide {
  display: none;
}
.search {
  height: auto;
  display: flex;
}
.search p {
  position: relative;
  margin-right: 20px;
  margin-left: 4px;
}
.search p .icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.search p .new {
  width: 18px;
  height: 10px;
  position: absolute;
  left: 15px;
  top: 0;
}
.register {
  height: 36px;
  display: flex;
  align-items: center;
  line-height: 36px;
}
.register .signin, .register .signup {
  font-size: 14px;
  color: #5e5e5e;
  white-space: nowrap;
}
.register button {
  outline: none;
  cursor: pointer;
  border: none;
  background: transparent;
}
.register a {
  color: #000;
  outline: none;
}
.header-right-box {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #4a4a4a;
  position: absolute;
  right: 0;
  top: 0;
}
.shop-car {
  width: 99px;
  height: 28px;
  border-radius: 15px;
  margin-right: 20px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.shop-car b {
  position: absolute;
  left: 28px;
  top: -1px;
  width: 18px;
  height: 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 350;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #ff0826;
  overflow: hidden;
  transform: scale(.8);
}
.shop-car img {
  width: 20px;
  height: 20px;
  margin-right: 7px;
}
.nav-right-box {
  position: relative;
}
.nav-right-box .nav-right {
  float: right;
  display: flex;
  height: 100%;
  line-height: 60px;
  position: relative;
}
.nav-right .nav-study {
  font-size: 15px;
  font-weight: 300;
  color: #5e5e5e;
  margin-right: 20px;
  cursor: pointer;
}
.nav-right .nav-study:hover {
  color: #000;
}
.nav-img img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
.home-my-account {
  position: absolute;
  right: 0;
  top: 60px;
  z-index: 101;
  width: 190px;
  height: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 #d0d0d0;
}
li {
  list-style: none;
}
.home-my-account li {
  height: 40px;
  font-size: 14px;
  font-weight: 300;
  color: #5e5e5e;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.home-my-account li img {
  cursor: pointer;
  width: 5px;
  height: 10px;
}
.home-my-account li span {
  height: 40px;
  display: flex;
  align-items: center;
}
.home-my-account li span b {
  font-weight: 300;
  margin-top: -2px;
}
</style>

在登录认证中接入防水墙

腾讯防水墙介绍

验证码有三种：图片验证码，短信验证码，滑动验证码
官网：https://007.qq.com/
在这里插入图片描述

使用微信扫码登录腾讯云控制台，然后根据官方文档，把验证码集成到项目中
快速接入：https://007.qq.com/python-access.html?ADTAG=acces.start
访问地址: https://cloud.tencent.com/document/product/1110/36839
访问云API秘钥

在这里插入图片描述
获取当前验证码应用的应用ID和应用秘钥.

把秘钥和ID保存到后端settings/dev.py配置文件中.

# 腾讯防水墙配置
TENCENT_CAPTCHA = {
    "GATEWAY": "https://ssl.captcha.qq.com/ticket/verify",
    "APPID": "193680254",  # 此处的APPID一定要和客户端的APPID保持一致，否则后面票据会失败！
    "App_Secret_Key": "rlZaFc4QXQds6wh6GojtN33ON",
}