欢迎访问我的博客专题
源码可访问 Github 查看
Vue中获取验证码逻辑
在 src/views/register/register.vue 中，就是前端页面的注册功能
发送验证码逻辑
seedMessage() {
var that = this;
//开启倒计时
var countdown = 60;
settime();
function settime() {
if (countdown === 0) {
that.getMessageText = "免费获取验证码";
countdown = 60;
return;
} else {
that.getMessageText = "重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function () {
settime()
}, 1000)
}
getMessage({
mobile: that.mobile
}).then((response) => {
console.log();
})
.catch(function (error) {
that.error.mobile = error.mobile ? error.mobile[0] : '';
});
}
Vue中register注册逻辑
在 src/views/register/register.vue 中，就是前端页面的注册功能
里面有一个methods写了注册的相关逻辑
html按钮点击
进入isRegister函数
isRegister() {
var that = this;
register({
password: that.password,
username: that.mobile,
code: that.code,
}).then((response) => {
cookie.setCookie('name', response.data.username, 7);
cookie.setCookie('token', response.data.access, 7);
//存储在store
// 更新store数据
that.$store.dispatch('setInfo');
//跳转到首页页面
this.$router.push({name: 'index'})
})
.catch(function (error) {
that.error.mobile = error.username ? error.username[0] : '';
that.error.password = error.password ? error.password[0] : '';
that.error.username = error.mobile ? error.mobile[0] : '';
that.error.code = error.code ? error.code[0] : '';
});
},
传递的参数有password、username、code。
注册有两种模式：一是注册完成，自己跳转到登录页面登录；二是注册完成后就直接登录了。
第一种：假如要注册完成，需要自己手动登录，可以注释掉上方的保存cookie的逻辑。这种登录很简单。
//cookie.setCookie('name', response.data.username, 7);
//cookie.setCookie('token', response.data.access, 7);
//存储在store
// 更新store数据
//that.$store.dispatch('setInfo');
这样就直接跳回首页，或者也可以跳回登录页面。
第二种：如果注册完成就直接登录，就需要后端返回一个token。
配置注册的url，按住ctrl，点击上面的register就可以跳转到 src/api/api.js ，修改为后端注册的url
//注册
export const register = parmas => {
return axios.post(`${local_host}/register/`, parmas)
};
注册完成后台返回token
现使用第二种方法。注册完成后登录，并跳转到首页。但是后端并没有写返回token的接口。就需要在注册视图中UserRegisterViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet)重载mixins.CreateModelMixin的create(self, request, *args, **kwargs)函数。
直接将create()函数拷贝到注册视图中，其他逻辑基本不变
class UserRegisterViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet):
"""
创建用户
"""
serializer_class = UserRegisterSerializer
queryset = User.objects.all()
def create(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
self.perform_create(serializer)
# 添加自己的逻辑，通过user，生成token并返回
headers = self.get_success_headers(serializer.data)
return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers)
在生成token之前，self.perform_create(serializer)这个函数，他只是调用了serializer.save()（如上代码图），因为要生成用户的token之前，必须要拿到user，所以这个函数也需要被重载。原函数中只是调用.save()，并没有返回。实际上serializer.save()中的serializer就是UserRegisterSerializer(serializers.ModelSerializer)中model的对象。重载它，把它返回，才能得到user对象。
class UserRegisterViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet):
"""
创建用户
"""
serializer_class = UserRegisterSerializer
queryset = User.objects.all()
def create(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = self.perform_create(serializer)
# 添加自己的逻辑，生成token并返回
headers = self.get_success_headers(serializer.data)
return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers)
def perform_create(self, serializer):
return serializer.save()
如何使用rest_framework_simplejwt库创建token，访问 https://github.com/davesque/django-rest-framework-simplejwt#creating-tokens-manually 可以看到使用方法。手动为用户创建令牌。
原示例如下：
from rest_framework_simplejwt.tokens import RefreshToken
def get_tokens_for_user(user):
refresh = RefreshToken.for_user(user)
return {
'refresh': str(refresh),
'access': str(refresh.access_token),
}
上面的函数get_tokens_for_user将返回给定用户的新refresh和access tokens的序列化表示。通常，rest_framework_simplejwt.token的任何子类的令牌。可以用这种方式创建令牌。
参考上面的方法，创建用户的token
from rest_framework_simplejwt.tokens import RefreshToken
class UserRegisterViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet):
"""
创建用户
"""
serializer_class = UserRegisterSerializer
queryset = User.objects.all()
def create(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = self.perform_create(serializer)
# 添加自己的逻辑，生成token并返回
refresh = RefreshToken.for_user(user)
tokens_for_user = {
'refresh': str(refresh),
'access': str(refresh.access_token),
# 数据定制化
'username': user.username, # 由于前端也需要传入username，需要将其加上。cookie.setCookie('name', response.data.username, 7);
}
headers = self.get_success_headers(serializer.data)
# return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers)
# 在返回的时候就直接返回tokens_for_user
return Response(tokens_for_user, status=status.HTTP_201_CREATED, headers=headers)
def perform_create(self, serializer):
return serializer.save()
测试注册
当注册完成后，就成功跳转到首页，并显示当前登录用户
Vue中logout功能逻辑
JWT的token并不是保存在服务器端的，这些数据保存在客户端，直接将cookie清除就可以了
在 src/views/head/shophead.vue 中
退出
点击退出
loginOut() {
cookie.delCookie('token');
cookie.delCookie('name');
//重新触发store
//更新store数据
this.$store.dispatch('setInfo');
//跳转到登录
this.$router.push({name: 'login'})
},
删除对应的cookie，然后跳转到登录页面。