使用Angular JS進行路線攔截

Question

我正在使用Firebase作為“后端”在AngularJS中構建應用程序。

我要這樣做，所以您必須登錄到應用程序才能看到任何內容。

我想使用Firebase用戶身份驗證系統。

我正在使用routeProvider路由我的應用程序。

我的問題是如何將這些路由限制為已登錄的用戶，並且僅允許未登錄的用戶查看登錄頁面？

我的路線如下所示：（簡而言之）

angular.module('myApp', ['ngRoute', 'firebase', 'components', 'ng-breadcrumbs', 'clients'])

.constant('fbUrl', 'https://my-billing.firebaseio.com/')

.config(function($routeProvider) {

    $routeProvider
        // Pages //
        .when('/', {
            //controller:'DashboardController as dashboard',
            templateUrl:'pages/dashboard.html',
        })
        .when('/dashboard', {
            //controller:'DashboardController as dashboard',
            templateUrl:'pages/dashboard.html',  
            label: 'Dashboard',
        })
        .when('/settings', {
            //controller:'SettingsController as settings',
            templateUrl:'pages/settings.html',  
            label: 'Settings',
        })

我的登錄功能如下所示：

angular.module('auth', ["firebase"])

.constant('fbUrl', 'https://my-billing.firebaseio.com/')

.controller('authController', function($scope, Firebase, $firebaseArray, fbUrl) {

    var auth = this;
    var ref = new Firebase(fbUrl);

    auth.password = function() {
        ref.authWithPassword({
            email    : auth.email,
            password : auth.password
        }, function(error, authData) {
            if (error) {
                console.log("Login Failed!", error);
            } else {
                console.log("Authenticated successfully with payload:", authData);
            }
        });
    }
})

Answer 1

您將需要為每條路線都具有解決功能。

解析功能應檢查用戶的權限，如果用戶沒有訪問路由的權限，則應將用戶重定向到另一個頁面。

希望這可以幫助。