Django+Vue，前后端分离，实现用户权限认证

网上教程一大堆，要么思路不够清晰，要么给你扔一大段代码，只有几行注释。。。。
看了我这个，你奶奶来都能实现前后端分离用户权限认证！

Django

采用token认证方式，使用 rest_framework_simplejwt 库配置权限认证。
需要注意的是，使用rest_framework_simplejwt 进行身份认证时并不需要去对数据库进行查询校验，所以并不会将token保存在数据库中。

1、安装第三方库：

pip install rest_framework

pip install rest_framework_simplejwt

2、项目根目录settings.py配置文件中写入以下配置项

# settings.py # INSTALLED_APPS中添加注册信息
INSTALLED_APPS = [ ....... 'rest_framework', 'rest_framework.authtoken',] # REST_FRAMEWORK中全局配置认证方式、权限方式。局部认证网上一大堆，请自查……^ ^
# 如settings.py文件中没有REST_FRAMEWORK，请自主写入
REST_FRAMEWORK = { // DEFAULT_PERMISSION_CLASSES设置默认的权限类，通过认证后赋予用户的权限 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), // DEFAULT_AUTHENTICATION_CLASSES设置默认的认证类，这里用token，也可以设置session或自定义的认证                              'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_simplejwt.authentication.JWTAuthentication', # 进行token认证 )
}
# SIMPLE_JWT是token配置项，参数很多，不一一列举，请自查……^ ^
import datetime //导入datetime库生成时间参数
SIMPLE_JWT = {# ACCESS_TOKEN_LIFETIME设置token令牌有效时间 # rest_framework_simplejwt官方默认有效时间是5分钟，这里改成15天'ACCESS_TOKEN_LIFETIME': datetime.timedelta(days=15), # REFRESH_TOKEN_LIFETIME设置token刷新令牌有效时间 'REFRESH_TOKEN_LIFETIME': datetime.timedelta(days=15),
}
# AUTH_USER_MODEL是配置默认的校验数据表，取决你自己的用户表
# 参数格式为：(你自己创建的app文件夹名称).(app文件夹中models.py中用户表名称)
# 以下 login 为我创建的app文件夹名称， UserInfo 为login下的models.py中的用户表名称
AUTH_USER_MODEL = 'login.UserInfo' # AUTH_PASSWORD_VALIDATORS是配置创建用户时的默认参数，这里密码长度最小为5位字符，系统默认时8位 AUTH_PASSWORD_VALIDATORS = [{ //设置密码最小长度为5 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 'OPTIONS': {'min_length': 5} },
]

3、项目根目录urls.py文件写入获取token、刷新token的路由

from django.contrib import admin
from django.urls import path, include
from rest_framework_simplejwt.views import TokenObtainPairView,TokenRefreshView urlpatterns = ( path('admin/', admin.site.urls),# 验证用户并生成token path('token/', TokenObtainPairView.as_view(),name="token_obtain_pair"), # 刷新token path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
)

4、用postman测试一下是否能成功获取token、刷新token
注意！请确保已经创建了用户，这里是用django自带的用户体系。
创建超级用户，命令行输入：python3 manage.py createsuperuser
创建完毕之后，用户数据信息会生成在用户数据表中，在之前settings.py文件中配置的AUTH_USER_MODEL = ‘login.UserInfo’
往后的用户信息认证，django都会去校验该用户数据表。

到这里就成功获取token令牌了。
headers：Content-Type:application/json
body：{“username”: “admin”, “password”: “admin”} //参数名一定要是username、password

5、自定义获取token的响应信息
这里是直接修改rest_framework_simplejwt库的原文件，官方文档的方法我不会用，嘻嘻。
文件路径是rest_framework_simplejwt/serializers.py
serializers.py中找到TokenObtainPairSerializer这个类

# 初始只有两个字段信息：access和refresh
data['access'] = str(refresh.access_token)
data['refresh'] = str(refresh)
# 往下可自行添加需要返回的信息，注意返回的信息字段必须存在于你的用户数据表内！
data['自定义返回key'] = 自定义返回value，value取值方法为self.user.用户表字段名
import datetime time = datetime.datetime.today().strftime("%Y-%m-%d %H:%M:%S")
data['message'] = 'success'
data['status'] = 200
data['now'] = time
data['data'] = { 'user_id':self.user.id, 'username':self.user.sl_name, 'department':self.user.department, }
# 保存，再用postman请求一次token接口，就能看到自定义返回的信息了

6、生成token后，请求其他接口时，用户信息认证。重点来了！！！！

网上能搜索到的99%的教程基本上到了获取token就结束了，没有详细说接下来怎么通过生成的token来验证用户接下来的接口请求。
这对于初学者来说，是一脸懵逼的，是非常不友好的，就好比话说了一半，剩下的一半就不说了。

# 在你的app文件下下的views.py中写入
# 首先，我们刚开始写接口的时候是这样的，这样是没有身份验证的，直接就访问成功
def aa(request): """业务逻辑""" return XXXXX
# 现在生成了token之后，我们应该这样写：
# 把函数方法写成类的形式，继承APIView类。
# APIView是REST framework提供的所有视图的基类, 继承自Django的View，对Django中的View进行了拓展，具备了认证、授权、限流、不同请求数据的解析的功能。
from rest_framework.views import APIView
class Aa(APIView): def get(self,request):   # 请求为get时的业务逻辑 """业务逻辑""" return XXXXX def post(self.request):  # 请求为post时的业务逻辑 """业务逻辑""" return XXXXX
# 接着在你的app文件下下的urls.py中写入
urlpatterns = [ path('aa', views.Aa.as_view(), name='aa')  # 注意一定要有as_view(),才能将接口传过来的参数传递给Aa这个类]
# 记得在根目录的urls.py中配置你的项目路由，如根目录配置如下：
urlpatterns = ( path('login/', include('login.urls')))
则可自行用postman测试携带token和不携带token请求 http://127.0.0.1:8000/login/aa

7、有关rest_framework_simplejwt的一个小坑，极易误导新手！！
要说的是TokenVerifyView这个视图，
网上的教程，99.999999%没有说这个视图到底是个啥！

这个视图是干嘛的，源码中是这样写的

class TokenVerifyView(TokenViewBase):"""Takes a token and indicates if it is valid.  This view provides noinformation about a token's fitness for a particular use."""serializer_class = serializers.TokenVerifySerializer

翻译出来就是：获取令牌并指示它是否有效。此视图不提供关于令牌适用于特定用途的信息。
这个视图只是检验你当前的token是否有效，别无他用。
这个视图可以用于vue前端写路由守卫的时候用上。
接下来说这个视图坑在哪里，首先用postman请求一下这个token验证接口。

body只需要传{“token”:"（你生成的token）"}
可以看到respones返回了一个空字典{}，这里是什么情况，真实情况就是！！！！
验证token有效，就是返回一个空字典{}！！！！可以看一下源码就知道。

源码中写的就是验证token有效那就return一个{} 。。。。。。
你可以在这个空字典中自定义任何返回内容。。。。。
这里算是个小坑。
到这里有关Django采用rest_framework_simplejwt权限验证就结束了。

Vue

接下来就Vue中如何实现前端如何保存请求登录接口成功后，后端返回的token，在后续请求中往headers中添加token发送给后端进行用户信息认证。验证通过，走业务逻辑。验证不通过，返回登录页让用户重新登录再次获取有效token。

1、封装一个自定义的axios请求
先在src目录下新建一个utils文件夹(名字可自定义)，在utils文件夹中新建两个js文件(名字可自定义)

request.js是封装axios请求的js文件，storage.js是如何处理token的js文件。
这里我们先处理token，封装三个方法，getItem获取保存的token，setItem存储token，removeitem删除token

/*storage.js*/
/*
封装模块 使用localStorage保存token到localStorage里，只要不删除，永久存在，实现持久化 从localStorage中取出一项数据 名字叫name（自定义名称）
*/
export const getItem = name => { return JSON.parse(localStorage.getItem(name));
}; /*
向localStorage中设置一项数据 名字为name里面设置值为obj
*/
export const setItem = (name, obj) => { localStorage.setItem(name, JSON.stringify(obj));
}; /*
删除*/
export const removeitem = name => { localStorage.removeItem(name);
};

然后封装axios请求

//request.js
/*对axios进行二次封装 请求拦截器增加token 响应拦截器处理大数据
*/
import store from "@/store/index";
import axios from "axios";
/*
自定义写法：const xxx = axios.create({}) 一个项目中可能有不同的服务器基础地址 就要用自定义写法设置不同的服务器基础地址
*/
const instance = axios.create({ baseURL: "http://127.0.0.1:8000" });
// 在instance(这是上面定义的自定义axios请求名称)上添加请求拦截器 补充请求头token信息
instance.interceptors.request.use( function(config) { // 从vuex中取出token,这里先这样写，下面会说这里是怎么回事 const token = store.state.token; // 如果有token则添加到headers中 if (token) { config.headers.Authorization = `JWT ${token}`; //这里的JWT是后端默认的token需要携带的字段，可在后端自定义，中间空格不能删除 } return config; }, function(error) { return Promise.reject(error); } ); export default instance;

2、打开store/index.js文件，在文件中的vuex里存储token，用的是上面storage.js中自定义的getItem方法。
vuex是什么，请百度自行学习，不过多赘述。

import Vue from "vue";
import Vuex from "vuex";
import { setItem, getItem } from "@/utils/storage"; //导入刚才定义token存储、获取方法
Vue.use(Vuex);
export default new Vuex.Store({ state: {// 保存公共数据 在设置vuex中的初值时，先从本地存储中取，如果取不到，则初始为空 token: getItem("token") || {} }, mutations: { mSetTokenInfo(state, tokenObj) { state.token = tokenObj; // 刷新会丢失所以进行持久化 调用上面storage.js文件里setItem方法保存token setItem("token", tokenObj); }}, actions: {}, modules: {}
});

3、用上面自定义的instance方法，发起axios请求登录接口，并保存返回的token

//点击【登录】后用自定义的instance方法发送axios请求
login_ButtonCheck: function() { const usr_val = $("#usr").val(); const pwd_val = $("#pwd").val(); //自定义的instance方法向后端发起post请求，常规axios写法为 this.axios.post instance .post("/login/", { username: usr_val, password: pwd_val }) .then(res => { //登录成功 //用this.$store.commit调用上面store/index.js文件中vuex里自定义的mSetTokenInfo方法保存登录成功返回的token       //res.data.access是返回信息中token所在的字段名，如不知道请回顾上面Django中自定义返回信息里定义的token返回字段     this.$store.commit("mSetTokenInfo", res.data.access); //登录成功后跳转Home页并将用户信息传至Home页 this.$router.push({ name: "Home", params: { username: res.data.data.username, department: res.data.data.department } }); }) .catch(error => { //登录失败 console.log(error) });

到这里就能在浏览器中按F12，Network中看到接口里的Request Headers中看到携带的token信息，Application中看到保存在本地的token。

4、登录成功并保存token后，后续的请求中携带保存的token一起向后端发送请求。

//后续记得用已经封装好的instance方法发起axios请求，别再用this.axios了！！！！
instance.post("/home/yz_cookie", login_data).then(res => { if (res.data.status === 200) { //用户身份后端验证通过 """请求成功后业务逻辑""" } else if (res.data.status === 401) { //用户身份后端验证失败，前端重定向跳转至登录页面，重新登录 this.$router.push({ name: "Login" }); }
});
这里请求成功后端身份验证通过后， 再手动删除浏览器Local Storage中保存的token，再次请求，后端身份验证失败，前端重定向跳转用户登录页。

至此，Django+Vue，前后端分离，用户身份验证流程就走完了。

End～

Django+Vue，前后端分离，实现用户权限认证相关推荐

SpringBoot + Vue 前后端分离（用户信息更新头像上传Markdown图片上传）
文章目录前言用户信息更新前端发送后端接口修改用户头像前端前端图片显示图片上传完整代码后端代码图片存储图片上传工具类图片工具类的配置工具类实现效果 Markdown 图片 ...
Spring Boot + Vue 前后端分离开发，权限管理的一点思路
在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...
Django+vue前后端分离项目构建
本项目用的Django是4.0.4版本,vue是2.0版本一.背景主要介绍如何使用后端Django + 前端Vue 的技术栈快速地搭建起一套web项目的框架 1.Django项目和应用的创建 pi ...
手把手Django+Vue前后端分离开发入门(附demo)
前言众所周知,Django对于网站快速开发非常友好,这得益于框架为我们做了很多事情,让我们只需要做一些简单的配置和逻辑即可把网站的功能开发出来.但是,在使用Django的过程中,有一个地方一直是比较 ...
SpringBoot+SpringSecurity前后端分离+Jwt的权限认证（改造记录）
欢迎关注方志朋的博客,回复"666"获面试宝典来源:blog.csdn.net/zzzgd_666/article/details/96444829 前言一般来说,我们用Spr ...
SpringBoot+SpringSecurity前后端分离+Jwt的权限认证改造记录！
大家好,我是宝哥! 前言一般来说,我们用SpringSecurity默认的话是前后端整在一起的,比如thymeleaf或者Freemarker,SpringSecurity还自带login登录页,还 ...
SpringBoot+SpringSecurity前后端分离+Jwt的权限认证
前言一般来说,我们用SpringSecurity默认的话是前后端整在一起的,比如thymeleaf或者Freemarker,SpringSecurity还自带login登录页,还让你配置登出页,错误 ...
django+vue前后端分离实现登录实践记载
在使用django+vue完成平台功能开发登录功能,实现后,写这个文章进行记载!!欢迎交流因为做的是内部使用平台,手动创建账号形式,没用到注册功能,无需实现一.登录的功能逻辑设计 1.前端页面输入 ...
Django+Vue前后端分离项目
导语编码三原则: 实用为主,效果为主官网是最好的教程,其它只是辅助不要重复造轮子,但应该知道其工作原理第一个项目,让我们从简单一点的开始:音乐列表技术栈后端:Python.Django(N ...
DT CMS致力于Spring Boot2.3.5 Vue前后端分离的RBAC权限框架（盛世美颜！）
文章目录前言一.核心技术二.系统架构 1.模块设计 1.后端模块 2.前端模块 2.安全设计 3.接口设计三.页面演示 1.登录首页 2.首页展示 3.用户列表 1.用户添加 2.角色分配 4 ...

Django+Vue，前后端分离，实现用户权限认证

Django+Vue，前后端分离，实现用户权限认证相关推荐

最新文章

热门文章