Angular rest auth client

Rest hívásokat fogunk első lépésben készíteni. Második lépésben pedig JSON Web Token (JWT) OAuth 2.0 Bearer token-es azonosítást fogunk írni. Lista lekérdezés, hozzáadás, módosítás, törlés.
Példa: 
    getUserListData(): Observable<User[]> {
        return this.http.get('/api/users').map((r) => {
            return <User[]>r;
        });
    }

    userAdd(newUser) {
        let url = '/api/users/add';

        this.http.post(url, {data: Base64.encode(JSON.stringify(newUser))}).subscribe((data: any) => {
                console.log(data);
            }
            , response => {
                console.log(response);
                if (response) {
                    this.addErrorMessage(response);
                }
            },
            () => {

                this.addSuccessMessage();
            });
    }

    userEdit(user) {
        let url = '/api/user/edit/' + user.id;

        this.http
            .put(url, {data: Base64.encode(JSON.stringify(user))},
                {})
            .subscribe((data: any) => {
                    console.log(data);
                },
                response => {
                    console.log(response);
                    if (response) {
                        this.editErrorMessage(response);
                    }
                },
                () => {

                    this.editSuccessMessage();
                }
            )
        ;
    }

   userDelete(user) {
        let url = '/api/user/delete/' + user.id;

        this.http.delete(url).subscribe(
            val => {
                console.log("Delete call successful value returned in body", val);
            },
            response => {
                this.deleteErrorMessage(response);
            },
            () => {
                this.deleteSuccessMessage();
            });

    }

A "message" függvényeket is ne felejtsük el elkészíteni a példa működéshez. Az /api url-eknél felmerülő cors problémákat a következő fejeztben fogjuk megnézni.

A felhasználói authentikációhoz egy felhasználóinév jelszó párossal, plusz client azonosítóval kérünk egy tokent. Ehhez példa kérés: 
    userAuthentication(userName, password) {

        let reqHeader = new HttpHeaders({'Content-Type': 'application/x-www-urlencoded', 'No-Auth': 'True'});

        this.username = userName;

        return this.http.get('/oauth/v2/token', {
            headers: reqHeader,
            params: new HttpParams()
                .set('username', userName)
                .set('password', password)
                .set('grant_type', 'password')
                .set('client_id', '1_3bcbxd9e24g0gk4swg0kwgcwg4o8k8g4g888kwc44gcc0gwwk4')
                .set('client_secret', '4ok2x70rlfokc8g0wws8c8kwcokw80k44sg48goc0ok4w0so0k')
        });
    }
Egy access_tokent és egy refresh_tokent kapunk eredményül. Az access_tokent a get,post, stb hívásainkban használhatjuk, a refresh_token-el pedig kérhetünk új tokent, ha már lejárt az aktuális, felhasználóinév és jelszó nélkül.

Új token kérése: 
    userRefreshToken() {

        let reqHeader = new HttpHeaders({'Content-Type': 'application/x-www-urlencoded', 'No-Auth': 'True'});

        return this.http.get('/oauth/v2/token', {
            headers: reqHeader,
            params: new HttpParams()
                .set('grant_type', 'refresh_token')
                .set('client_id', '1_3bcbxd9e24g0gk4swg0kwgcwg4o8k8g4g888kwc44gcc0gwwk4')
                .set('client_secret', '4ok2x70rlfokc8g0wws8c8kwcokw80k44sg48goc0ok4w0so0k')
                .set('refresh_token', localStorage.getItem('refreshToken'))

        }).subscribe((data: any) => {

            localStorage.setItem('userToken', data.access_token);
            localStorage.setItem('refreshToken', data.refresh_token);
        });
    }
 
Olvasnivaló:
https://auth0.com/blog/refresh-tokens-what-are-they-and-when-to-use-them/ https://coursetro.com/posts/code/110/Creating-and-Using-Angular-5-Services# https://stackoverflow.com/questions/47230418/angular-4-how-to-wait-for-httpclient-complete
https://oauth.net/2/
2018.11.10.