未经授权的用户重定向到登录页面

Question

如果未授权用户，则应将其重定向到登录页面。我已经尝试过如下代码。使用此代码，我得到一个错误

  

core.js：1673错误错误：未捕获（已承诺）：   InvalidCharacterError：无法在“ Window”上执行“ atob”：   要解码的字符串未正确编码。

我不确定在哪里检查此错误。

有人可以帮助我在哪里进行更改？

token.service.ts

export class TokenService {

    private iss = {
        login: 'http://localhost:8000/api/login',
        signup: 'http://localhost:8000/api/signup'
    }

    constructor() { }

    setToken(token) {
        localStorage.setItem('token', token);
    }

    getToken() {
        return localStorage.getItem('token');
    }

    isValid() {
        const token = this.getToken();
        if (token) {
            const payload = this.payload(token);
            if (payload) {
                return Object.values(this.iss).indexOf(payload.iss) > -1 ? true : false;
            }
        }
        return false;
    }

    payload(token) {
        const payload = token.split('.')[1];
        return JSON.parse(atob(payload));
    }

    loggedIn() {
        // !! this will return either true or false
        return this.isValid();
    }
}

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { TokenService } from 'src/app/services/token.service';

@Injectable({
    providedIn: 'root'
})
export class AuthGuard implements CanActivate {

    constructor(private _tokenService: TokenService, private _router: Router) { }

    canActivate(): boolean {
        if (this._tokenService.loggedIn()) {
            return true;
        } else {
            this._router.navigate(['login']);
            return false;
        }
    }
}

token-interceptor.service.ts

import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { TokenService } from './token.service';

@Injectable({
    providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {

    constructor(private injector: Injector) { }

    intercept(req, next) {
        let authService = this.injector.get(TokenService);

        let tokenizedReq = req.clone({
            setHeaders: {
                Authorization: 'Bearer ' + authService.getToken()
            }
        });
        return next.handle(tokenizedReq);
    }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SpecialEventsComponent } from './components/special-events/special-events.component';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
    {
        path: 'special',
        component: SpecialEventsComponent,
        canActivate: [AuthGuard]
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }