使用Angular JS进行路由拦截

时间:2015-08-03 01:49:54

标签: javascript html angularjs firebase angularfire

我正在使用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);
            }
        });
    }
})

1 个答案:

答案 0 :(得分:0)

你需要为每条路线都有一个解决功能。

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

希望这有帮助。