Question

如果用户未登录，如何阻止用户输入App url。

App.js：

var MTApp = angular.module('MTApp', ['MEControllers','ui.router','services']);

    MTApp.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
         .state('/', {
                url: '/',
                templateUrl: 'login.html'})             
            .state('login-app', {
                url : '/Login',
                templateUrl : 'login.html'})

           .state('input-parameters', {
            url : '/Parameters',
            templateUrl : 'parameters.html'});
    })

main.js:

    var MEControllers = angular.module('MEControllers',[]);
    MEControllers.controller('LoginAppCtrl', LoginAppCtrl);
    MEControllers.controller('RequestCtrl', RequestCtrl);

    function LoginAppCtrl($scope, $http,utilities,$location,$rootScope) {           
            var self = this;

            self.request = {
                     user: '',
                     password:''
            }
            self.postprocess = function(){
                //self.request.values = self.request.values.split(",");
            }
            self.submitRequest = function(){
                self.postprocess();
                console.log(self.request);
                $http({
                    method : 'POST',
                    url : url,
                    headers: {'Content-Type': 'application/json'},
                    data : self.request
                }).success(function(data, status, headers, config) {

                    if (data.status) {
                        // successfull login
                    //  User.isLogged = true;
                    //  User.username = data.user;
                    //  $rootScope.loggedInUser = $scope.user;
                        $location.path("/Parameters");
                    }
                    else {
                    //  User.isLogged = false;
                        //User.username = '';
                    }   

                }).error(function(data, status, headers, config) {
                    alert('Invalid Login Details');
                });

            }

            this.validate = function(){
                console.log(self.request);


            }
        }

        function RequestCtrl($scope, $http,utilities,$location) {
            var self = this;            
            self.request = {

            }
            self.postprocess = function(){

            }
            self.submitRequest = function(){
                self.postprocess();
                console.log(self.request);
                $http({
                    method : 'POST',
                    url : url,
                    headers: {'Content-Type': 'application/json'},
                    data : self.request
                }).success(function(data, status, headers, config) {

                    utilities.setOutput(data);                    
                    console.log(data);


                }).error(function(data, status, headers, config) {
                    alert('Error!');
                });

            }

            this.validate = function(){
                console.log(self.request);


            }
        }

如果用户登录，我该如何获得分配？此外，如何阻止用户通过网址输入网页，如何隐藏网址？

Answer 1

您可以使用auth详细信息创建本地存储对象，并检查用户何时启动应用程序，如下所示：

if(window.localStorage.auth) {
    $urlRouterProvider.otherwise('/tab/index');
}else{
    $urlRouterProvider.otherwise('/login');
}

并且在您的主控制器中类似于：

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
    event.preventDefault(); 
    if(window.localStorage.auth) {
        $state.go(toState.name)
    }else{
        $urlRouterProvider.otherwise('/login');
    }

})

应检查路线何时发生变化。

Answer 2

您可以在$ rootscope服务的帮助下完成。在每个routeChange Start检查用户是否登录（您可以创建要检查的服务）以及用户是否已登录重定向到所需页面，否则在登录时重定向页。这是必需的代码

   app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
        $rootScope.$on('$routeChangeStart', function (event) {

            if (!Auth.isLoggedIn()) {
                console.log('DENY');
                event.preventDefault();
                $location.path('/login');
            }
            else {
                console.log('ALLOW');
                $location.path('/home');
            }
        });
    }]);

     .factory('Auth', function(){
    var user;

    return{
        setUser : function(aUser){
            user = aUser;
        },
        isLoggedIn : function(){
            return(user)? user : false;
        }
      }
    })

Ps： - 抱歉英语不好。

Source

如果用户尚未登录Angular JS，则重定向到登录页面

2 个答案: