使用 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

您需要为每条路线提供解析功能。

resolve函数应该检查用户的权限，如果用户没有访问路由的权限，你应该将用户重定向到另一个页面。

希望这会有所帮助。