如何在Http请求中使用Cookie传递用户token，实现登录状态保持。

前言

OpenHarmony作为万物互联的操作系统，网络连接是最基础的能力。其中，有大量的网络应用需要进行用户认证，那么在OpenHarmony的应用开发中，用户登录后，如何在Http请求中使用Cookie传递用户token，实现登录状态保持？

需求

在OpenHarmony中使用@ohos.net.http模块实现网络请求，我们需要实现网络应用用户登录及登录状态保持，但在接口介绍文档、Sample中并未提供如何保存及使用Cookie的示例。

实现

那么下面就通过一个网络音乐应用的例子（应用详细介绍链接在文末），为大家介绍如何实现用户Token传递，服务器使用Django框架提供的django.contrib.auth模块实现用户登录鉴权。

1、用户登录

服务端：

获取csrf_token接口：

def get_csrf_token(request):
    csrf_token = get_token(request)
    return JsonResponse({'csrf_token': csrf_token})

登录接口：

def login_request(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    print('login from app')
    print(request.POST)
    # 使用authenticate函数来认证用户
    user = authenticate(request, username=username, password=password)

    if user is not None:
        # 用户认证成功，使用login函数来记录登录状态
        login(request, user)

        # 设置一个欢迎信息，可以将其改为HttpResponse或重定向
        return JsonResponse({'res':"login success!"})
    else:
        # 认证失败，返回错误信息
        return JsonResponse({'res':"login failed!"})

应用端：

先获取服务器CSRF token，然后使用用户名密码登录。

login() {
    try {
      this.httpRequest.request(ServerConstants.CSRF_URL,
        (err: Error, data: http.HttpResponse) => {
          if (!err) {
            console.info('HttpResponse Result:' + data.result);
            const jsonObject: object = JSON.parse(data.result as string);
            this.csrfToken = jsonObject['csrf_token'];
            this.httpRequest.request(ServerConstants.LOGIN_URL,
              {
                method: http.RequestMethod.POST,
                extraData: 'username=' + this.userName + '&password=' + this.password,
                header: {
                  'content-Type': 'application/x-www-form-urlencoded',
                  'X-CSRFToken': this.csrfToken,
                  'Cookie': 'csrftoken=' + this.csrfToken + ';'
                },
              },
              (err: Error, data: http.HttpResponse) => {
                if (!err) {
                  console.info('HttpResponse Result:' + data.result);
                  console.info('HttpResponse code:' + data.responseCode);
                  if (200 === data.responseCode) {
                    this.loginInfo = this.userName
                    this.loginCookie = data.header['set-cookie'];
                  }
                  console.info('HttpResponse type:' + JSON.stringify(data.resultType));
                  console.info('HttpResponse header:' + JSON.stringify(data.header));

                  this.getCustomListFromServer();
                } else {
                  console.info('HttpResponse error:' + JSON.stringify(err));
                }
              });
          } else {
            console.info('HttpResponse error:' + JSON.stringify(err));
          }
        });
    } catch (err) {
      console.info('HttpRequest error:' + JSON.stringify(err));
    }
  }

登录成功后将Cookie保存：this.loginCookie = data.header['set-cookie'];

Cookie内容如下：

["csrftoken=VPfo0sQoTzgsRhSrySJsoQZQMxwZWqmAm0Y4L1szUdbwOv41M19tkprs73w6pNrH; expires=Thu, 12 Jun 2025 09:20:42 GMT; Max-Age=31449600; Path=/; SameSite=Lax", "sessionid=e45smklhb4gdaimk3c3pm0kpv1c7u3lq; expires=Thu, 27 Jun 2024 09:20:42 GMT; HttpOnly; Max-Age=1209600; Path=/; SameSite=Lax" ]

2、后续请求

服务端：

根据用户查询信息的接口：

def get_playlists(request):
    print(request.user)
    playlists = Playlist.objects.filter(user=request.user).values('playlist_name','song').distinct()
    result = []
    for playlist in playlists:
        song = Song.objects.filter(id=playlist.get('song')).values('id', 'name', 'singer','language').first()
        combined_queryset = playlist | song
        result.append(combined_queryset)
    return JsonResponse(result, safe=False)

应用端：

使用保存的Cookie，放在请求头中，服务端即能从request中获取用户信息。

需要根据请求Cookie进行格式转换：

this.loginCookie.map(cookie => {
              const parts = cookie.split('=');
              return `${parts[0]}=${parts[1]}`;
            }).join('; ')

完整接口：

getCustomListFromServer() {
    this.customPlayLists = [];
    try {
      this.httpRequest.request(ServerConstants.CUSTOM_LIST_URL,
        {
          method: http.RequestMethod.GET,
          header: {
            'Cookie': this.loginCookie.map(cookie => {
              const parts = cookie.split('=');
              return `${parts[0]}=${parts[1]}`;
            }).join('; ')
          }
        },
        (err: Error, data: http.HttpResponse) => {
          if (!err) {
            console.info('HttpResponse getCustomListFromServer Result:' + data.result);
            interface PlaylistItem {
              playlist_name: string;
              song: number;
              id: number;
              name: string;
              singer: string;
              language: string;
            }
            let jsonObject: PlaylistItem[]  = JSON.parse(data.result as string);
            let groupedByPlaylistName = jsonObject.reduce((accumulator, item) => {
              if (!accumulator[item.playlist_name]) {
                accumulator[item.playlist_name] = [];
              }
              accumulator[item.playlist_name].push(item);
              return accumulator;
            }, {} as  Record<string, PlaylistItem[]>);
            const keys = Object.keys(groupedByPlaylistName);
            keys.forEach((playlistName) => {
              console.log(`Playlist: ${playlistName}`);
              let aPlayingList: AudioItem[] = Array<AudioItem>();
              groupedByPlaylistName[playlistName].forEach((song, index) => {
                aPlayingList.push(new AudioItem(song.name, song.singer, song.id.toString()));
              });
              this.customPlayLists.push(new PlayListData(playlistName, $r('app.media.icon'), aPlayingList.length + '首',
                aPlayingList, ''));
            });
          } else {
            console.info('HttpResponse error:' + JSON.stringify(err));
          }
        });
    } catch (err) {
      console.info('HttpRequest error:' + JSON.stringify(err));
    }
  }

遗留问题

在开发过程中，参考接口文档时，http模块提供了一个缓存接口：

按说明理解，应该可以实现自动缓存cookie的功能，但是按示例代码尝试后并不生效，不知和本文所需要的功能是否相同，或者说有bug，有待大家探索。

结尾

本例代码是基于我的另一篇网络音乐播放应用开发的，点击：应用介绍链接，登录代码也会更新到同一个工程中，如有需要可以自行下载。