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

Redirect to a login page if the user is not yet logged in Angular JS

本文关键字：登录重定向 JS 用户 Angular 如果更新时间：2023-09-26

如果用户没有登录，我如何阻止他输入应用程序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);

            }
        }

如果用户登录，我如何获得灌输？此外，我如何防止用户通过url输入页面，我如何隐藏url？

您可以创建一个具有身份验证详细信息的本地存储对象，并检查用户何时启动应用程序，如下所示：

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');
    }
})

其应当在路线改变时进行检查。

您可以在$rootscope服务的帮助下完成此操作。在每个路由上更改开始检查用户是否登录（您可以创建服务进行检查），以及用户是否登录，是否重定向到所需页面，否则在登录页面上重定向。这是所需的代码

   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;
        }
      }
    })

抱歉英语不好。

源