Fatal编程技术网
  • javascript/
  • Javascript 使用resolve（Firebase、AngularJS和UI-ROUTER）保护页面访问安全

Javascript 使用resolve（Firebase、AngularJS和UI-ROUTER）保护页面访问安全

javascript angularjs firebase

Javascript 使用resolve（Firebase、AngularJS和UI-ROUTER）保护页面访问安全,javascript,angularjs,angular-ui-router,firebase,resolve,Javascript,Angularjs,Angular Ui Router,Firebase,Resolve,我需要一些关于我正在用AngularJS和AngularFire Firebase构建的单页应用程序的帮助 基本上，我已经尽我所能地遵循这些说明，以防止访问需要身份验证的安全页面，如果不将用户重定向到安全页面的话 如果我在“loginCtrl”中将'currentAuth'更改为'Auth'，该应用程序似乎可以工作，尽管存在以下错误： 我仍然可以使用地址栏中键入的格式访问'securePage'： https://.firebaseio.com/#/securePage. 该页面为空白，但控制台

我需要一些关于我正在用AngularJS和AngularFire Firebase构建的单页应用程序的帮助

基本上，我已经尽我所能地遵循这些说明，以防止访问需要身份验证的安全页面，如果不将用户重定向到安全页面的话

如果我在“loginCtrl”中将
'currentAuth'
更改为
'Auth'
，该应用程序似乎可以工作，尽管存在以下错误：

  • 我仍然可以使用地址栏中键入的格式访问
    'securePage'
    ：
    • https://.firebaseio.com/#/securePage.

    该页面为空白，但控制台和查看页面源时会出现明显错误

    我基本上需要通过遵循使用“解析”方法使用UI-ROUTER的说明来知道我的代码是否正确。我只是想将用户重定向到登录视图，不管他们使用什么方法来尝试查看“securePage”

    这是我的密码：

    index.html

    <!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content=
    "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    name="viewport">
    <meta content="noindex, nofollow" name="robots">
    <link href="favicon.ico" rel="icon" type="image/x-icon">
    <base href="/">
    <title>
        App
    </title>
    <link href="theme.css" rel="stylesheet" type="text/css">
    <link href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    rel="stylesheet" type="text/css">
    <script defer="defer" src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://cdn.firebase.com/js/client/2.2.4/firebase.js" type=
    "text/javascript">
    </script>
    <script defer="defer" src=
    "https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src="app.js" type="text/javascript">
    </script>
    </script>
</head>
<body data-ng-app="app">
    <div class="container">
        <div data-ui-view=""></div>
    </div>
</body>
</html>

        <script type="text/javascript">
        if (typeof app === 'undefined') {
            document.location.href = "index.html";
        }
    </script>

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-user"></i>
            </span>
            <label for="email" class="sr-only">Email address</label>
            <input data-ng-model="email" type="email" id="email" 
            class="form-control" placeholder="Email address" required>
        </div>
    </div>
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock"></i>
            </span>
            <label for="password" class="sr-only">Password</label>
            <input data-ng-model="password" type="text" id="password" 
            class="form-control" placeholder="Password">
        </div>
    </div>
    <button data-ng-click="signin()" class="btn btn-lg btn-primary btn- 
    block" id="signInButton" type="submit">Sign in</button>

        <script type="text/javascript">
        if (typeof app === 'undefined') {
            document.location.href = "index.html";
        }
    </script>

    <div>
        <h1>Secure Page</h1>
    </div>

    
应用程序
    app.js

    var app = angular.module('app', ['firebase', 'ui.router']);

app.factory('Auth', ['$firebaseAuth',
    function($firebaseAuth) {
        var ref = new Firebase(
            'https://<MYURL>.firebaseio.com/');
        return $firebaseAuth(ref);
    }
]);

app.run(['$rootScope', '$state',
    function($rootScope, $state) {
        $rootScope.$on('$stateChangeError', '$stateChangeStart',
            function(event, toState, toParams, fromState,
                fromParams, error) {
                if (error === 'AUTH_REQUIRED') {
                    $state.go('/home');
                }
                event.preventDefault();
                window.history.forward();
            });
    }
]);

app.config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
    function($urlRouterProvider, $stateProvider, $locationProvider) {
        $stateProvider.state('home', {
            url: '/home',
            templateUrl: 'login.html',
            controller: 'loginCtrl'
        })
        .state('securePage', {
            url: '/securePage',
            templateUrl: 'secure-page.html',
            resolve: {
                'currentAuth': ['Auth',
                    function(Auth) {
                        return Auth.$requireAuth();
                    }
                ]
            }
        });
        $locationProvider.html5Mode(true);
        $urlRouterProvider.otherwise('/home');
    }
]);

app.controller('loginCtrl', ['$scope', 'currentAuth', '$state',
    function($scope, currentAuth, $state) {

        $scope.signin = function() {
            currentAuth.$authWithPassword({
              email: $scope.email,
              password: $scope.password
            }).then(function(authData) {
              console.log("Logged in as:", authData.uid);
            }).catch(function(error) {
              console.error("Authentication failed:", error);
            });
        };
    }
]);

    var-app=angular.module（'app'，['firebase'，'ui.router']）；
app.factory（'Auth'，['$firebaseAuth'，
函数（$firebaseAuth）{
var ref=新火基(
'https://.firebaseio.com/');
返回$firebaseAuth（ref）；
}
]);
app.run（['$rootScope'，'$state'，'，
函数（$rootScope，$state）{
$rootScope.$on（“$stateChangeError”、“$stateChangeStart”，
函数（事件、toState、TopArms、fromState、，
fromParams，错误）{
如果（错误==='AUTH_REQUIRED'）{
$state.go（'/home'）；
}
event.preventDefault（）；
window.history.forward（）；
});
}
]);
app.config（['$urlRouterProvider'、'$stateProvider'、'$locationProvider'，
函数（$urlRouterProvider、$stateProvider、$locationProvider）{
$stateProvider.state（'home'{
url:“/home”，
templateUrl:'login.html'，
控制器：“loginCtrl”
})
.state（'securePage'{
url:“/securePage”，
templateUrl:“secure page.html”，
决心：{
“currentAuth”：[“Auth”，
函数（Auth）{
返回Auth.$requireAuth（）；
}
]
}
});
$locationProvider.html5Mode（true）；
$urlRouterProvider。否则（'/home'）；
}
]);
app.controller（'loginCtrl'，['$scope'，'currentAuth'，'$state'，'，
函数（$scope，currentAuth，$state）{
$scope.signin=函数（）{
currentAuth.$authWithPassword({
电子邮件：$scope.email，
密码：$scope.password
}).then（函数（authData）{
log（“登录身份：”，authData.uid）；
}).catch（函数（错误）{
console.error（“身份验证失败：”，错误）；
});
};
}
]);
    login.html

    <!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content=
    "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    name="viewport">
    <meta content="noindex, nofollow" name="robots">
    <link href="favicon.ico" rel="icon" type="image/x-icon">
    <base href="/">
    <title>
        App
    </title>
    <link href="theme.css" rel="stylesheet" type="text/css">
    <link href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    rel="stylesheet" type="text/css">
    <script defer="defer" src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://cdn.firebase.com/js/client/2.2.4/firebase.js" type=
    "text/javascript">
    </script>
    <script defer="defer" src=
    "https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src="app.js" type="text/javascript">
    </script>
    </script>
</head>
<body data-ng-app="app">
    <div class="container">
        <div data-ui-view=""></div>
    </div>
</body>
</html>

        <script type="text/javascript">
        if (typeof app === 'undefined') {
            document.location.href = "index.html";
        }
    </script>

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-user"></i>
            </span>
            <label for="email" class="sr-only">Email address</label>
            <input data-ng-model="email" type="email" id="email" 
            class="form-control" placeholder="Email address" required>
        </div>
    </div>
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock"></i>
            </span>
            <label for="password" class="sr-only">Password</label>
            <input data-ng-model="password" type="text" id="password" 
            class="form-control" placeholder="Password">
        </div>
    </div>
    <button data-ng-click="signin()" class="btn btn-lg btn-primary btn- 
    block" id="signInButton" type="submit">Sign in</button>

        <script type="text/javascript">
        if (typeof app === 'undefined') {
            document.location.href = "index.html";
        }
    </script>

    <div>
        <h1>Secure Page</h1>
    </div>

    
如果（应用程序类型===‘未定义’）{
document.location.href=“index.html”；
}
电子邮件地址
密码
登录
    安全页面.html

    <!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content=
    "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    name="viewport">
    <meta content="noindex, nofollow" name="robots">
    <link href="favicon.ico" rel="icon" type="image/x-icon">
    <base href="/">
    <title>
        App
    </title>
    <link href="theme.css" rel="stylesheet" type="text/css">
    <link href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    rel="stylesheet" type="text/css">
    <script defer="defer" src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://cdn.firebase.com/js/client/2.2.4/firebase.js" type=
    "text/javascript">
    </script>
    <script defer="defer" src=
    "https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src=
    "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"
    type="text/javascript">
    </script>
    <script defer="defer" src="app.js" type="text/javascript">
    </script>
    </script>
</head>
<body data-ng-app="app">
    <div class="container">
        <div data-ui-view=""></div>
    </div>
</body>
</html>

        <script type="text/javascript">
        if (typeof app === 'undefined') {
            document.location.href = "index.html";
        }
    </script>

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-user"></i>
            </span>
            <label for="email" class="sr-only">Email address</label>
            <input data-ng-model="email" type="email" id="email" 
            class="form-control" placeholder="Email address" required>
        </div>
    </div>
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock"></i>
            </span>
            <label for="password" class="sr-only">Password</label>
            <input data-ng-model="password" type="text" id="password" 
            class="form-control" placeholder="Password">
        </div>
    </div>
    <button data-ng-click="signin()" class="btn btn-lg btn-primary btn- 
    block" id="signInButton" type="submit">Sign in</button>

        <script type="text/javascript">
        if (typeof app === 'undefined') {
            document.location.href = "index.html";
        }
    </script>

    <div>
        <h1>Secure Page</h1>
    </div>

    
如果（应用程序类型===‘未定义’）{
document.location.href=“index.html”；
}
安全页面
    忽略上面的Firebase URL错误https://.firebaseio.com/#/securePage. 我的意思是在“.”前面加上正确的部分您的
    loginCtrl
    应该使用
    Auth
    ，而不是
    currentAuth
    作为依赖项
    currentAuth
    仅对
    securePage
    状态（及其子级）可用。否则，解析看起来是正确的。您确定在测试访问/securePage时未通过身份验证吗？嗨，Anid，感谢您的回复！我现在已经设法修复它，将它改回“Auth”，因为您已经确认了我对该问题的初步理解。我确实认为Firebase页面实际上是不正确的，因为它们在两个控制器中包含了“currentAuth”作为依赖项……此外，您必须经过身份验证才能访问所述的“securePage”，否则状态将不会加载。我终于意识到删除“$locationProvider.html5Mode（true）；”行（app.js）和“”（index.html）并坚持使用“/#/”旧的“丑陋URL”方法是防止问题的最具交叉兼容性的方法。