测试平台分支-小程序端-4-小程序登录（下）

怪盗LYL

发布于 2023-09-15 08:12:09

1800

发布于 2023-09-15 08:12:09

文章被收录于专栏：测试开发真货测试开发真货

继续我们的小程序登录功能。

上一章获取的用户信息是返回的模拟的，这是因为游客模式需要我们切换下。

这时候获取到的就是真实的用户信息了。

输出用户code。这个code在后面用来获取用户唯一标识。

后端

根据提示我们来完善后端代码。首先建一个wxutil文件用来处理微信登录方法。

#-*- codeing = utf-8 -*-
#@Time: 2023/6/19 23:16
#@Author: 怪盗LLYL
#@File: qqutils.py
#@Software: PyCharm
import requests


def jscode2session(code):
    """
    对token进行和发行校验并获取payload
    :param token:
    :return:{'status': True, 'data': {...}}
    """
    headers = {
    }
    params = (
        ('appid', 'xxx'),
        ('secret', 'xxx'),
        ('js_code', code),
        ('grant_type', 'authorization_code'),
    )
    response = requests.get('https://api.weixin.qq.com/sns/jscode2session', headers=headers, params=params)
    rspdata = response.json()
    result = {}
    if rspdata.get('errcode') == 0:
        result['status'] = True
        result['data'] = rspdata
    elif rspdata.get('errcode')== 40029:
        result['status'] = False
        result['error'] = 'code 无效'
    elif rspdata.get('errcode') == 45011:
        result['status'] = False
        result['error'] = '频率限制，每个用户每分钟100次'
    elif rspdata.get('errcode') == -1:
        result['status'] = False
        result['error'] = '系统繁忙，此时请开发者稍候再试'
    else:
        result['status'] = False
        result['error'] = '其他错误'
    return result

class wx_login(APIView):
    def post(self, request, *args, **kwargs):
        """ 用户登录 """
        # params用于获取字符串，
        # data：用于获取正文，
        # post方法两个参数都可以使用，get方法只能使用params
        code = request.data.get('code')
        # 检测用户和密码是否正确，此处可以在数据进行校验。
        if code:
            # 存在code
            wxdata = jscode2session(code)
            if wxdata.get('status'):
                userInfo = request.data.get('userInfo')
                userInfo['openid'] = wxdata.get('data')['openid']
                userInfo['unionid'] = wxdata.get('data')['unionid']
                save_wxuser(userInfo) #保存用户
                payload = userInfo
                token = create_token(payload) #创建token
                return Response({'status': "True", 'userInfo': payload}, headers={'token': token})
            else:
                return Response({'status': "False", 'error': wxdata.get('error')})
        return Response({'status': "False", 'error': '不存在code'})

增加save_wxuser方法

模型里面增加头像url字段

别忘了同步数据库：

重启调试下：

发现还是报错，纠结半天发现是因为微信返回没按照接口规范返回，想骂人。

按照官方文档UnionID 需要在开放平台绑定小程序。

重新调试下。

登录成功了，刚刚微信名字段忘加了加上。

      nick_name = models.CharField('微信名',max_length=20 ,null=True ,blank=True)

完善前端

使用vuex,执行下面语句并在根目录下创建store文件夹，store文件夹下创建index.js文件。

npm install vuex --save

写登录登出的方法。

import { createStore } from "vuex";

const store = createStore({
 state: {
  // 小程序配置, 
  userInfo: null,
  token: null
 },
 getters: {
  // getUserInfo: state => {return state.userInfo },
  // getToken: state => {return state.token},
  // getTakeType: state => {return state.takeType},
 },
 mutations: {
  login(state, data) {
   console.log("[vuex] 登录", data.userInfo)
   console.log(data)
   state.userInfo = data.userInfo;
   state.token = data.token;
   uni.setStorageSync('token', data.token)
   uni.setStorageSync("userInfo", data.userInfo) // 缓存用户的信息到本地
  },
  logout(state) {
   console.log("[vuex] 退出登录")
   state.userInfo = null;
   state.token = null;
   uni.removeStorageSync('token');
   uni.removeStorageSync("userInfo");
   uni.reLaunch({
    url: '/pages/mine/mine'
   });
  },
  setUserInfo(state, userInfo){
   state.userInfo = userInfo;
   uni.setStorageSync("userInfo", userInfo) // 缓存用户的信息到本地
  },
  setToken(state, token){
   state.token = token;
   uni.setStorageSync('token', token)
  }
 },
 actions: {
 }
})
export default store;

在main.js引入：

// #ifdef VUE3
// Vue.js 3.x 版本的应用程序入口文件
import { createSSRApp } from 'vue'
import App from './App.vue'
import store from "./store";
import config from './config.js'
// 导出 createApp 函数，用于创建 Vue.js 应用程序实例
export function createApp() {
  // 使用 createSSRApp 函数创建应用程序实例
  const app = createSSRApp(App)
  app.use(store);
  // 将 config 对象挂载到全局属性中
  app.config.globalProperties.$config=config;
  // 返回应用程序实例
  return {
    app
  }
}
// #endif

重新运行：

还需要刚加载时候就判断下token,修改APP.vue：

<script>
 export default {
  onLaunch: function() {
   let token = uni.getStorageSync('token');
   let userInfo = uni.getStorageSync("userInfo");
   console.log(userInfo);
   if (token) { 
   console.log('存在token');
   this.loginToken(token);
    
   }
  },
  onShow: function() {
   console.log('App Show')
  },
  onHide: function() {
   console.log('App Hide')
  },methods:{
   // 通过本地缓存的token去登录
   loginToken(token) {
    const that = this
    console.log(token) 
    if (token) {
     console.log('存在token')
     var URL = that.$config.baseUrl
     // that.$store.commit('setToken', token);
     uni.request({
      url: URL + 'api/logintoken/',
      method: 'POST',
      data: {
       token: token
      },
      success: result => {
        if (result.data.status == "True") {
        var token = result.header.token
        var userInfo = result.data.userInfo
        that.$store.commit('login',{ userInfo, token});
        uni.reLaunch({
         url: '/pages/index/index'
        });
       }else{
        that.$store.commit("logout");
       }
      },
      fail: () => {
       that.$store.commit("logout");
      },
      complete: () => {}
     });
    } else {
     console.log('不存在token')
    }
   }
  }
 }
</script>
<style lang="scss">
</style>

后端也要加上token登录方法。

class logintoken(APIView):
    def post(self, request, *args, **kwargs):
        """ 用户登录 """
        # params用于获取字符串，
        # data：用于获取正文，
        # post方法两个参数都可以使用，get方法只能使用params
        token = request.data.get('token')
        # 检测用户和密码是否正确，此处可以在数据进行校验。
        if token:
            # 存在token
            payload = parse_payload(token)
            if payload.get('status'):
                userInfo = payload.get('data')
                userInfo.pop('exp')
                payload = userInfo
                token = create_token(payload)
                return Response({'status': "True", 'userInfo': payload}, headers={'token': token})
            else:
                return Response({'status': "False", 'error': payload.get('error')})
        return Response({'status': "False", 'error': '不存在token'})