how to handle token authentication in Angular Dart?

Question

First time dealing with a SPA. I have a back-end restful service that returns a token when a user signs in. I know I am supposed to send the token through the headers in each request so I was thinking in saving the token in a file and create a service or a class that loads the token in every component but I don't know if this is a good approach as I can't find documentation for Angular Dart about this.

Answer 1

I saved the Token first in localStorage as Tobe O suggested:

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"]});
}

But still I was receiving 401 responses when I tried to get user information, this was the function:

  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;
  }

I couldn't get authorized because django-rest-auth wasn't properly configured for token authorization. The solution was to add TokenAuthentication to the default authentication classes in django settings.

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