如何在 Angular Dart 中处理令牌身份验证？答案

【问题标题】：how to handle token authentication in Angular Dart?如何在 Angular Dart 中处理令牌身份验证？
【发布时间】：2018-02-19 00:04:10
【问题描述】：

第一次与 SPA 打交道。我有一个后端 RESTful 服务，它在用户登录时返回一个令牌。我知道我应该通过每个请求中的标头发送令牌，所以我正在考虑将令牌保存在文件中并创建一个服务或在每个组件中加载令牌的类，但我不知道这是否是一个好方法，因为我找不到关于 Angular Dart 的文档。

【问题讨论】：

可以将token保存在localStorage中
您好，感谢您的提示。将其保存到 localStorage 非常有效，我可以按计划访问令牌密钥。我仍然无法在标题中设置授权。如果我将其设置为标头，我会从服务器收到 401 错误：{“Authorization”：“Token”+token_key}
这取决于服务器的确切期望。你访问的是什么服务器？ “我找不到 Angular Dart 的文档”，这与 Angular 无关，也不需要任何特殊的 Angular 支持。
我正在使用带有 django 的本地服务器，它的配置是问题所在。我通过添加一个不在库文档（django-rest-auth）中的配置（'rest_framework.authentication.TokenAuthentication'）来解决它，是的，我现在看到它与 Angular Dart 无关。跨度>

标签： django-rest-framework dart local-storage token django-rest-auth

【解决方案1】：

按照 Tobe O 的建议，我首先将 Token 保存在 localStorage 中：

Future login(username, password) async {
    String url = 'http://127.0.0.1:8000/auth/login/';
    var response =
    await _client.post(url, body: {'username': username, 'password': password});
    Map mapped_response = _decoder.convert(response.body);
    window.localStorage.addAll({"token": mapped_response["key"]});
}

但是当我尝试获取用户信息时仍然收到 401 响应，这就是函数：

  Future check_authentification () async {
      String _headers_key = "Authorization";
      String _headers_value =  "Token "+window.localStorage["token"];
      var response = await _client.get("http://127.0.0.1:8000/auth/user/", headers: {_headers_key: _headers_value});
      user_data = _decoder.convert(response.body);
      response_status = response.statusCode;
  }

我无法获得授权，因为 django-rest-auth 未正确配置令牌授权。解决方案是在 django 设置中将 TokenAuthentication 添加到默认身份验证类中。

REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
    'rest_framework.authentication.BasicAuthentication',
    'rest_framework.authentication.SessionAuthentication',
    'rest_framework.authentication.TokenAuthentication',
)}

【讨论】：