现在很多接口项目在登录的时候返回一个token
,登录后的拿着这个token
去访问登录之后的页面。
在Django中,如何生成这样的token
呢?
django rest framework权限和认证有四种方式:
- BasicAuthentication 此身份验证方案使用HTTP基本身份验证,根据用户的用户名和密码进行签名。
基本身份验证通常仅适用于测试。 - TokenAuthentication 此身份验证方案使用基于令牌的简单HTTP身份验证方案。
令牌认证适用于客户端 - 服务器设置,例如本机桌面和移动客户端。 - SessionAuthentication 此身份验证方案使用Django的默认会话后端进行身份验证。
会话身份验证适用于与您的网站在同一会话上下文中运行的AJAX客户端。 - RemoteUserAuthentication 此身份验证方案允许您将身份验证委派给Web服务器,该服务器设置REMOTE_USER 环境变量。
我采用的是 TokenAuthentication 这种认证方式,后端(Django)生成Token
- 首先安装对应的模块
pip3 install djangorestframework
- 然后在项目根目录的主配置文件下的
settings.py
中添加一下内容
INSTALLED_APPS = {
...
'rest_framework',
'rest_framework.authtoken',
}
- 继续在
settings.py
中添加REST_FRAMEWORK
项,rest_framework.authentication.TokenAuthentication
上面的第三种 token 认证的方式。
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
...
'rest_framework.authentication.TokenAuthentication', # token认证
)
}
- 同步数据库,生成
authtoken_token
表,在项目根目录下:
python3 manage.py migrate
- 重启项目之后会在管理页面(/admin)中看到新增了一个表
- 在对应的views.py中编写视图函数:
from django.http import JsonResponse
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, login
from rest_framework.authtoken.models import Token
import json
def mainProcess(request):
data = request.body
data = json.loads(str(data, 'utf-8')) # 处理request数据转换成json
username = data.get('username')
password = data.get('password')
user = authenticate(username=username, password=password)
if user is None:
return JsonResponse({
'result': "fail",
'message': "您输入的密码不正确"
})
# 删除旧token
old_token = Token.objects.filter(user=user)
old_token.delete()
# 创建新token
token = Token.objects.create(user=user)
login(request, user)
return JsonResponse({
'result': 'success',
'message': '登录成功',
'token': token.key # 返回token
})
- 别忘了在urls.py设置访问地址,这里太简单就不写了
前端接收token,并将token存入cookie中
在 Vue3.x 下全局配置vue-cookies
- 安装
vue-cookies
:npm install vue-cookies --save
- 安装完成之后在
main.js
中配置:
import App from './App.vue'
const app = createApp(App)
// vue-cookies
import VueCookies from 'vue-cookies'
app.config.globalProperties.$cookies = VueCookies; // 在组件中使用this.$cookies调用vue-cookies
- vue-cookies的使用方法:
- 设置一个cookie
this.$cookies.set(keyName, value, expireTimes)
,expireTimes可选单位(s, d, m, y) - 获取一个cookie
this.$cookies.get(keyName)
- 删除一个cookie
this.$cookies.remove(keyName)
- 检查某个 cookie name是否存在
this.$cookies.isKey(keyName)
,return false or true
- 设置一个cookie
剩下的就交给大佬们自由发挥啦!!
参考文章:
https://blog.csdn.net/csl125/article/details/117432769
https://cloud.tencent.com/developer/article/1507629