【Vue+DRF生鲜电商】16.Vue中注册、退出功能交互

### Vue中注册、退出功能交互 #### Vue中获取验证码逻辑 在 src/views/register/register.vue 中，就是前端页面的注册功能 ```html <input class="verify-code-btn sendcode" type="button" id="jsSendCode" @click="seedMessage" :value="getMessageText"> ``` 发送验证码逻辑 ```JavaScript 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按钮点击 ```html <input class="btn btn-green" id="jsMobileRegBtn" @click="isRegister" type="button" value="注册并登录"> ``` 进入`isRegister`函数 ```JavaScript 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的逻辑。这种登录很简单。 ```JavaScript //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 ```JavaScript //注册 export const register = parmas => { return axios.post(`${local_host}/users/`, parmas) }; ``` #### 注册完成后台返回token 现使用第二种方法。注册完成后登录，并跳转到首页。但是后端并没有写返回`token`的接口。就需要在注册视图中`UserViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet)`重载`mixins.CreateModelMixin`的`create(self, request, *args, **kwargs)`函数。  直接将`create()`函数拷贝到注册视图中，其他逻辑基本不变 ```python class UserViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet): """ 创建用户 """ serializer_class = UserSerializer 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`就是`UserSerializer(serializers.ModelSerializer)`中model的对象。重载它，把它返回，才能得到user对象。 ```python class UserViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet): """ 创建用户 """ serializer_class = UserSerializer 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 可以看到使用方法。手动为用户创建令牌。 原示例如下： ```python 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 ```python from rest_framework_simplejwt.tokens import RefreshToken class UserViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet): """ 创建用户 """ serializer_class = UserSerializer 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 中 ```html <a @click="loginOut">退出</a> ``` 点击退出 ```JavaScript loginOut() { cookie.delCookie('token'); cookie.delCookie('name'); //重新触发store //更新store数据 this.$store.dispatch('setInfo'); //跳转到登录 this.$router.push({name: 'login'}) }, ``` 删除对应的cookie，然后跳转到登录页面。

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/cedebb6e872f539bef8c3f919874e9d7/

很赞哦！ (1)