Vue 和 Django 实现 Token 身份验证的流程

目录
  • 基于 Token 的验证流程
  • Token 的组成
    • Header
    • Payload
    • Signature
  • 加密算法
  • Django 生成和验证 Token
    • 处理 Token
    • 登录成功批发 Token
    • 中间件拦截验证 (Middleware)
  • Vue 存储和携带 Token
    • 登录成功存储 Token
    • 请求头携带用户名和 Token

使用 Django 编写的 B/S 应用通常会使用 Cookie + Session 的方式来做身份验证,用户登录信息存储在后台数据库中,前端 Cookie 也会存储少量用于身份核验的数据,由后台直接写入。但是在开发调试阶段,使用 Postman 等请求工具请求登录时,可能会缺失前端本应存储的数据,而导致登录信息核验一直不成功。本篇介绍基于 Token 的身份验证机制,并使用 Vue 和 Django 实现。

使用 Django 编写的 B/S 应用通常会使用 Cookie + Session 的方式来做身份验证,用户登录信息存储在后台数据库中,前端 Cookie 也会存储少量用于身份核验的数据,由后台直接写入。但是在开发调试阶段,使用 Postman 等请求工具请求登录时,可能会缺失前端本应存储的数据,而导致登录信息核验一直不成功。在本地联调前后端时可能也会有问题。

本篇介绍基于 Token 的身份验证机制,并使用 Vue 和 Django 实现。

基于 Token 的验证流程

与 Session 不同的是,Token 机制不会将用户登录信息存储在后台数据库中,而是生成含有身份信息的 Token 字符串存储在前端中。在前端请求需要验证的后台 API 时,后端将优先拦截并核验身份信息。

基于 Token 的验证流程如下:

  • 客户端使用用户名和密码请求登录
  • 服务器收到请求后,验证用户名和密码
  • 验证成功后,服务端根据用户信息签发一个 Token,返回给客户端
  • 客户端存储 Token
  • 客户端每次向服务器发送其它请求时,都要携带 Token
  • 服务器收到请求,若请求的 API 需要验证身份,则先验证 Token,成功后再返回数据

Token 的组成

构造 Token 的方法较多,只要客户端和服务端约定好了生成和验证的格式,则有很多自定义的方法。当然,也有一些标准的写法,例如 JWT,读作 /jot/,表示 JSON Web Tokens。

JWT 标准的 Token 有三个部分:

  • header
  • payload
  • signature

三个部分使用 . 分隔开,且使用 Base64 编码,示例如下:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJuaW5naGFvLm5ldCIsImV4cCI6IjE0Mzg5NTU0NDUiLCJuYW1lIjoid2FuZ2hhbyIsImFkbWluIjp0cnVlfQ.SwyHTEx_RQppr97g4J5lKXtabJecpejuef8AqKYMAJc

Header

Header 主要蕴含两部分内容的信息,分别是 Token 的类型和加密使用的方法。

初始数据对象示例如下:

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

上述数据对象在经过算法加密、Base64 编码后,变为 Token 的第一部分:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

Payload

Payload 为 Token 的具体内容,下面是可选的标准字段,也可以自定义添加需要的内容。

  • iss: Issuer, 发行者
  • sub: Subject, 主题
  • aud: Audience, 观众
  • exp: Expiration time, 过期时间, 可为时间戳格式
  • nbf: Not before
  • iat: Issued at, 发行时间, 可为时间戳格式
  • jti: JWT ID

同样的,该部分初始数据对象经过算法加密、Base64 编码后,变为 Token 的第二部分。

Signature

Signature 为 Token 的签名部分,相当于是前两部分的签名,用于防止其他人篡改 Token 中的信息。在处理时,可以将生成的 Token 前两段内容,使用 MD5 等签名算法进行处理,将结果作为本部分内容。

加密算法

从上面对 Token 组成部分的介绍中,可以了解到,在规定 Token 需蕴含的数据信息后,需要经过一定的算法加密、Base64 编码后成为 Token 的第一、二部分。因此,在生成 Token 时,要解决使用什么加密算法。

此处的加密算法一定要是可逆的、可解密的,因为我们不仅要生成 Token,还要能从 Token 中解析出我们生成时存储的数据,以验证用户信息和 Token 的有效期。因此,这里不能采用 MD5、SHA1 这样的哈希算法,因为它们无法解密,只能用于生成签名。

在 Django 中内置了加密模块 django.core.signing,我们调用其中的 dumpsloads 函数实现加密和解密。

示例:

from django.core import signing
data = {
    "username": "Zewan"
}
value = signing.dumps(data) # encrypt
raw = signing.loads(value)  # decrypt
print(value, src)

Django 生成和验证 Token

上面我们已经了解了 Token 机制的流程和采取的加密算法,接下来介绍 Django 中如何编写代码以实现 Token 机制。

我规定 Token 的 Header 部分为 {"typ": "JWP", "alg": "default"},Payload 部分含有用户名 username 和过期时间 exp,Signature 我使用 MD5 算法生成签名。在登录成功后,后端返回给前端 username 和 Token,由前端存储起来;当前端发送需要验证身份信息的请求时,将 username 和 Token 加入请求头中,后端从请求头获取这两部分,从 Token 中解析得到用户名和过期时间,核验请求头中的 username 是否正确及 Token 是否有效。

处理 Token

我在 utils/token.py 文件中实现 Token 的生成和解析数据的功能:

import time
from django.core import signing
import hashlib

HEADER = {'typ': 'JWP', 'alg': 'default'}
KEY = "Zewan"
SALT = "blog.zewan.cc"

def encrypt(obj):
    """加密:signing 加密 and Base64 编码"""
    value = signing.dumps(obj, key=KEY, salt=SALT)
    value = signing.b64_encode(value.encode()).decode()
    return value

def decrypt(src):
    """解密:Base64 解码 and signing 解密"""
    src = signing.b64_decode(src.encode()).decode()
    raw = signing.loads(src, key=KEY, salt=SALT)
    return raw

def create_token(username):
    """生成token信息"""
    # 1. 加密头信息
    header = encrypt(HEADER)
    # 2. 构造Payload(有效期14天)
    payload = {"username": username, "iat": time.time(),
               "exp": time.time()+1209600.0}
    payload = encrypt(payload)
    # 3. MD5 生成签名
    md5 = hashlib.md5()
    md5.update(("%s.%s" % (header, payload)).encode())
    signature = md5.hexdigest()
    token = "%s.%s.%s" % (header, payload, signature)
    return token

def get_payload(token):
    """解析 token 获取 payload 数据"""
    payload = str(token).split('.')[1]
    payload = decrypt(payload)
    return payload

def get_username(token):
    """解析 token 获取 username"""
    payload = get_payload(token)
    return payload['username']

def get_exp_time(token):
    """解析 token 获取过期时间"""
    payload = get_payload(token)
    return payload['exp']

def check_token(username, token):
    """验证 token:检查 username 和 token 是否一致且未过期"""
    return get_username(token) == username and get_exp_time(token) > time.time()

登录成功批发 Token

在登录请求处理函数中,验证用户名和密码成功后,调用 utils/token.py 文件中的 create_token 函数生成 token,并将 username 和 token 返回前端。代码较为简单,此处不多展示。

中间件拦截验证 (Middleware)

创建一个中间件(Middleware),在前端请求需要身份核验的后端路由时,由该中间件核验其 username 和 token,验证成功后再放行,进入业务处理的 API 中。

我的项目名称为 backend_demo,在自动生成的 backend_demo 包中,我创建 middleware.py 文件,构建中间件。该文件内容如下:

提示:前端向请求头添加 xxx 信息,一般会自动转变为 HTTP_XXX (全部大写)

from utils.token import check_token
from django.http import JsonResponse

try:
    from django.utils.deprecation import MiddlewareMixin  # Django 1.10.x
except ImportError:
    MiddlewareMixin = object

# 白名单,表示请求里面的路由时不验证登录信息
API_WHITELIST = ["/api/user/login", "/api/user/register"]

class AuthorizeMiddleware(MiddlewareMixin):
    def process_request(self, request):
        if request.path not in API_WHITELIST:
            # 从请求头中获取 username 和 token
            username = request.META.get('HTTP_USERNAME')
            token = request.META.get('HTTP_AUTHORIZATION')
            if username is None or token is None:
                return JsonResponse({'errno': 100001, 'msg': "未查询到登录信息"})
            else:
                # 调用 check_token 函数验证
                if check_token(username, token):
                    pass
                else:
                    return JsonResponse({'errno': 100002,
                                         'msg': "登录信息错误或已过期"})

实现中间件后,将其添加进项目中,在 settings.py 文件的 MIDDLEWARE 中添加建立的中间件:

MIDDLEWARE = [
    'backend_demo.middleware.AuthorizeMiddleware',
    # ...
]

Vue 存储和携带 Token

登录成功存储 Token

登录成功后,前端获取并存储后端返回的 username 和 token。前端实现存储的方式有很多,我这里使用简单的方法,将其存储在 localStorage 中。

// 此处用 username 和 authorization 表示,放到项目中要依据情况修改该变量标识
localStorage.setItem("username", username);
localStorage.setItem("authorization", authorization);

请求头携带用户名和 Token

接下来实现请求头携带用户名和 Token 信息。

在 Vue.js 实现的项目中,我一般是用 Axios 向后端发送请求。在 Axios 中,不需要在每一处请求的代码中添加请求头代码,只需要在 main.js 中配置 Axios 的默认请求器,即可使所有的请求中 headers 都携带用户名和 token。

main.js 中核心代码如下:

提示:这里填入 headers 中虽然是 usernameauthorization,但会被自动转化为 HTTP_USERNAMEHTTP_AUTHORIZATION

import axios from 'axios';

// add username and token into headers
axios.interceptors.request.use(
    config => {
        var username = localStorage.getItem('username');
        var authorization = localStorage.getItem('authorization');
        // 若 localStorage 中含有这两个字段,则添加入请求头
        if (username & authorization) {
            config.headers.authorization = authorization;
            config.headers.username = username;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

这样,就在 Vue.js 和 Django 编写的前后端项目中,实现了基于 Token 的身份验证机制。其他前后端框架的 Token 实现原理与本文一致,但是代码需要根据所用框架进行合理修改。

到此这篇关于Vue 和 Django 实现 Token 身份验证的流程的文章就介绍到这了,更多相关Vue  Django身份验证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用Vuex解决Vue中的身份验证问题

    传统方式中,许多人使用本地存储,来管理通过客户端验证生成的tokens.一个大问题是如何有更好的方式,来管理验证tokens,从而允许我们来存储更大的用户信息. 这就是Vuex的作用. Vuex为Vue.js应用管理状态..对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变. 对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧. 建立应用模块 对于这个项目,我们想创建一个使用vuex和vue-router的vue应用.我们会使用vue cli 3

  • 详解vue项目中使用token的身份验证的简单实践

    工作原理 前端页面进行登录操作, 将用户名与密码发给服务器; 服务器进行效验, 通过后生成token, 包含信息有密钥, uid, 过期时间, 一些随机算法等 ,然后返回给前端 前端将token保存在本地中, 建议使用localstorage进行保存.  下次对服务器发送请求时, 带上本地存储的token 服务器端,进行对token的验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端 为通过则返回错误码, 提示保错信息, 然后跳转到登录页. 具体步骤 所用技术: vuex + ax

  • Vue 和 Django 实现 Token 身份验证的流程

    目录 基于 Token 的验证流程 Token 的组成 Header Payload Signature 加密算法 Django 生成和验证 Token 处理 Token 登录成功批发 Token 中间件拦截验证 (Middleware) Vue 存储和携带 Token 登录成功存储 Token 请求头携带用户名和 Token 使用 Django 编写的 B/S 应用通常会使用 Cookie + Session 的方式来做身份验证,用户登录信息存储在后台数据库中,前端 Cookie 也会存储少量

  • Django基于Token的验证使用的实现

    目录 什么是Token 为什么要用Token 基于 Token 的身份验证流程 Token的组成形式 Django如何使用Token 什么是Token Token字面意思是令牌,功能跟Session类似,也是用于验证用户信息的,Token是服务端生成的一串字符串,当客户端发送登录请求时,服务器便会生成一个Token并将此Token返回给客户端,作为客户端进行请求的一个标识以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码.与session的不同之处在于,Session是将

  • thinkphp5框架API token身份验证功能示例

    本文实例讲述了thinkphp5框架API token身份验证功能.分享给大家供大家参考,具体如下: 使用说明:登陆时生成token和刷新用的refresh_token,返回给客户端,客户端收到保存本地localStorage等,每次访问接口带上token,后端验证token存在并且一致后方可执行接下来的动作,假如不存在就返回token过期,客户端调用刷新接口传入token和refresh_token,服务器端进行验证,验证通过重新生成新的token保存数据库,返回给客户端客户端刷新本地toke

  • node.js实现token身份验证的示例代码

    安装依赖 express-jwt npm i express-jwt 将token校验相关数据导入配置文件 // setting.js module.exports = {     token: {         // token密钥         signKey: 'blog_globM_token_key_$$$$',         // 过期时间         signTime: 3600 * 24 * 3,         // 请求头参数         header: 'au

  • Django用户身份验证完成示例代码

    在这篇Django文章中,wom 将讨论Django User 验证,Django附带了一个用户认证系统. 它处理用户帐户,组,权限和基于cookie的用户会话. Django身份验证系统同时处理身份验证和授权. 简要地说,身份验证将验证用户是他们声称的身份,而授权则确定允许经过身份验证的用户执行的操作. 基本上,我们将创建登录,注销,忘记密码和重置密码功能. 身份验证支持在django.contrib.auth中为Django contrib模块.默认情况下,所需的配置已包含在django-a

  • Django中的JWT身份验证的实现

    1.认证与授权 1.验证:身份验证是验证个人或设备标识的过程.身份验证过程之一是登录过程.注册网站后,您的信息(ID,密码,名称,电子邮件等)将存储在其数据库中.之后,您无需创建帐户即可提供信息.相反,您只需要提供用户名和密码来验证您的身份,网站就会自动知道您正在访问. 2.授权:授权是用于确定用户特权或访问级别的安全机制.在许多社区网站上,只有上传帖子和管理员的人才能删除它.当其他人尝试删除帖子时,网站应该抛出错误(但是在许多情况下,他们甚至看不到删除按钮).因此,对于每个请求,用户都需要证明

  • node实现基于token的身份验证

    最近研究了下基于token的身份验证,并将这种机制整合在个人项目中.现在很多网站的认证方式都从传统的seesion+cookie转向token校验.对比传统的校验方式,token确实有更好的扩展性与安全性. 传统的session+cookie身份验证 由于HTTP是无状态的,它并不记录用户的身份.用户将账号与密码发送给服务器后,后台通过校验,但是并没有记录状态,于是下一次用户的请求仍然需要校验身份.为了解决这一问题,需要在服务端生成一条包含用户身份的记录,也就是session,再将这条记录发送给

  • 基于Token的身份验证的方法

    最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twitter,Google+,Github 等等,比起传统的身份验证方法,Token 扩展性更强,也更安全点,非常适合用在 Web 应用或者移动应用上.Token 的中文有人翻译成 "令牌",我觉得挺好,意思就是,你拿着这个令牌,才能过一些关卡. 传统身份验证的方法 HTTP 是一种没有状态的协议,也就是它并不知道是谁是访问应用.这里我们把用户看成是客户端,客户端使用用户名还有密码通过

随机推荐