Как использовать компонентный маршрутизатор AngularJS 1.5 в сочетании с аутентификацией пользователя?

Question

Я не совсем готов перейти к Angular 2, но я хотел заняться их новым маршрутизатором и компонентами.

Для фона я использую экземпляр Python в Google App Engine, который использует конечные точки в сочетании с Angular.

Как использовать компонентный маршрутизатор AngularJS 1.5 для обслуживания html с аутентифицированным пользователем и без него? Я хочу сделать это как можно более "угловатым" способом. Текущая документация потеряна на мне.

Answer 1

Недавно я боролся с тем же. Я решил это так:

В объекте определения компонента добавьте свойство $canActivate:

import { MainController } from './main.controller';

export class MainComponent {

    constructor() { 
        this.controller = MainController;
        this.templateUrl = 'app/main/main.html';
        this.$canActivate = (Auth) => {
            'ngInject';

            return Auth.redirectUnauthenticated();
        };
    }
}

Создайте службу аутентификации, которая содержит всю информацию об аутентификации:

export class AuthService {

    constructor($auth, UserApi, $q, $rootRouter, Storage) {
        'ngInject';

        this.$auth = $auth;
        this.$q = $q;
        this.$rootRouter = $rootRouter;
        this.storage = Storage;
        this.userApi = UserApi.resource;
    }

    /**
     * Check user's status
     */
    isAuthenticated() {
        return this.$auth.isAuthenticated();
    }

    /**
     * Redirect user to login page if he is not authenticated
     */
    redirectUnauthenticated() {
        if (!this.$auth.isAuthenticated()) {
            this.$rootRouter.navigate(['Login']);

            return false;
        }

        return true;
    }
}

ПРИМЕЧАНИЕ. Служба $ auth поступает из библиотеки спутников.

По сути, в каждом компоненте (к которому вы можете перейти), где требуется только аутентифицированный доступ, поместите одно и то же свойство $canActivate. Я не уверен, что это лучшее решение, но оно работает:)