Несанкционированный после входа в систему с рельсовым бэкэндом

Question

Привет, я создаю приложение с интерфейсом в angular и фоном ruby-on-rails. Я настроил имя входа с помощью doorkeeper, но теперь проблема в том, что я могу войти в систему с действительными учетными данными, но после входа в систему с моей панели инструментов из моего бэкэнда вызывается некоторый API, но он возвращает Unauthorizedи если я перезагрузить страницу, все работает нормально. Теперь данные будут возвращены без проблем авторизации. Я не знаю, с чего начать, чтобы решить эту проблему, и я довольно плохо знаком с этим углом.

Это мой authentication.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { EndPoints } from '../utils/end-points'
import { Router } from '@angular/router';
​
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
    private currentUserSubject: BehaviorSubject<any>;
    public currentUser: Observable<any>;
​
    constructor(private http: HttpClient, private router: Router) {
        this.currentUserSubject = new BehaviorSubject<any>(JSON.parse(localStorage.getItem('currentUser')));
        this.currentUser = this.currentUserSubject.asObservable();
    }
​
    public get currentUserValue() {
        return this.currentUserSubject.value;
    }

    public isAuthenticated(){
       var token= JSON.parse(localStorage.getItem('currentUser')).access_token
       if (token == null || token == undefined)
       {
           return false;
       }
       return true
    }
​
    login(data) {
        return this.http.post<any>(`${EndPoints.API_URL}${EndPoints.Login}`, data)
            .pipe(map(user => {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                console.log(user);
                this.currentUserSubject.next(user);
                return user;
            }));
    }
​
}

Это мой auth-guard.service.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthenticationService } from './authentication.service';
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public auth: AuthenticationService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

Это мой login.component.ts

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { UserLogin } from 'src/app/shared/models/userlogin';
import { AuthenticationService } from 'src/app/shared/services/authentication.service';
import { Subscription } from 'rxjs';
import { Route, Router } from '@angular/router';
import { ToastrService, ToastContainerDirective } from 'ngx-toastr';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, OnDestroy {
  userdata: any;
  subscription: Subscription;
  email: any;
  password: any;
  grant_type: any;
  constructor(private userlogin: UserLogin, private authenticationService: AuthenticationService, private route:Router, private toaster: ToastrService) {}

  ngOnInit() {
    this.userdata = this.userlogin.returnUserLoginPostData();
  }
  ngOnDestroy() {
    this.subscription.unsubscribe()
  }

  showError()
  {
    this.toaster.error('Invalid Email or Password!', 'Error!',{
      positionClass: 'toast-bottom-left'
    });
  }
  onSubmit()
  {

    this.subscription = this.authenticationService.login(this.userdata).subscribe(data=> {
      if (data.status_code == 200)
      {
        this.route.navigate(["/dashboard"])
      }
    },
    (error) => {
      this.showError();
    })
  }
}

Это мой logout api

  logout()
  {
    const url = EndPoints.API_URL + EndPoints.Logout;
    const dataarr = {
      "token": JSON.parse(localStorage.getItem('currentUser')).access_token
    }
    this.subscription = this.httpservice.logout(url, dataarr).subscribe(data=>{
      }
    )
    localStorage.removeItem('currentUser');
    this.router.navigate(['/']);
  }

Это мой httpservice.ts

import { Injectable } from '@angular/core';
// import 'rxjs/Rx';
import { HttpClient, HttpHeaders, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
​
@Injectable()
export class HttpService {
​
    public currentError: any;
​
    constructor(private http: HttpClient) {
​
    }
    get(url): Observable<any> {
        return this.http.get(url);
    }
    post(url, dataarr): Observable<any> {
        const body = JSON.stringify(dataarr);
        console.log(body);
        return this.http.post(url, body);
    }
    patch(url, dataarr): Observable<any> {
        const body = JSON.stringify(dataarr);
        console.log(body);
        return this.http.patch(url, body);
    }
    put(url, dataarr): Observable<any> {
        const body = JSON.stringify(dataarr);
        console.log(url);
        console.log(body);
        return this.http.put(url, body);
    }

    logout(url, dataarr): Observable<any> {
        const body = JSON.stringify(dataarr);
        let headers = new HttpHeaders({
            'Login-Type': 'application/json'
        });
        return this.http.post(url, body, {headers: headers});
    }
}

Помощь высоко ценится спасибо.