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.contribimport adminfrom django.urlsimport path, includefrom rest_framework_simplejwt.viewsimport 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中写入# 首先，我们刚开始写接口的时候是这样的，这样是没有身份验证的，直接就访问成功defaa(request):"""业务逻辑"""return XXXXX# 现在生成了token之后，我们应该这样写：# 把函数方法写成类的形式，继承APIView类。# APIView是REST framework提供的所有视图的基类, 继承自Django的View，对Django中的View进行了拓展，具备了认证、授权、限流、不同请求数据的解析的功能。from rest_framework.viewsimport APIViewclassAa(APIView):defget(self,request):# 请求为get时的业务逻辑"""业务逻辑"""return XXXXXdefpost(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%没有说这个视图到底是个啥！

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

classTokenVerifyView(TokenViewBase):"""
    Takes a token and indicates if it is valid.  This view provides no
    information 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（自定义名称） 
*/exportconstgetItem= name=>{returnJSON.parse(localStorage.getItem(name));};/* 
向localStorage中设置一项数据 名字为name里面设置值为obj 
*/exportconstsetItem=(name, obj)=>{ 
    localStorage.setItem(name,JSON.stringify(obj));};/* 
删除
 */exportconstremoveitem= name=>{ 
    localStorage.removeItem(name);};

然后封装axios请求

//request.js/*
 对axios进行二次封装 请求拦截器增加token 响应拦截器处理大数据 
*/import storefrom"@/store/index";import axiosfrom"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);});exportdefault instance;

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

import Vuefrom"vue";import Vuexfrom"vuex";import{ setItem, getItem}from"@/utils/storage";//导入刚才定义token存储、获取方法
Vue.use(Vuex);exportdefaultnewVuex.Store({ 
    state:{// 保存公共数据 在设置vuex中的初值时，先从本地存储中取，如果取不到，则初始为空
        token:getItem("token")||{}}, 
    mutations:{mSetTokenInfo(state, tokenObj){ 
            state.token= tokenObj;// 刷新会丢失所以进行持久化 调用上面storage.js文件里setItem方法保存tokensetItem("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){//用户身份后端验证通过 """请求成功后业务逻辑"""}elseif(res.data.status===401){//用户身份后端验证失败，前端重定向跳转至登录页面，重新登录this.$router.push({ name:"Login"});}}); 
这里请求成功后端身份验证通过后， 再手动删除浏览器Local Storage中保存的token，再次请求，后端身份验证失败，前端重定向跳转用户登录页。

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

End～