javascript - Angular 认证

Question

如果没有找到用户，问题出在每个 $routeChangeStart 上，如果我只输入 url，它仍然会引导我访问页面。

现在我已经在服务器上重写了规则。

Options +FollowSymlinks
RewriteEngine On
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

RewriteRule (.*) /index.html [L]

这是 app.js

var app = angular.module('myApp', ['ngRoute']);
app.config(function($httpProvider){


    // attach our Auth interceptor to the http requests
    $httpProvider.interceptors.push('AuthInterceptor');


});


app.run(['$rootScope','$scope','Auth', '$location', function($rootScope, $scope, Auth, $location){
     $rootScope.$on('$routeChangeStart', function(event){
        $scope.loggedIn = Auth.isLoggedIn();
        console.log(Auth.isLoggedIn());

        Auth.getUser().then(function(response){
            console.log(response);
            $scope.user = response;
        }).catch(function(error){
            console.log(error);
        });

    });
}]);

这是我的angular auth factory

app.factory('AuthToken', function($window){

    var authTokenFactory = {};

    authTokenFactory.setToken = function(token){
        if(token){
            $window.localStorage.setItem('token', token);
        }else{
            $window.localStorage.removeItem('token');
        }
    };

    authTokenFactory.getToken = function(){
        return $window.localStorage.getItem('token');
    }

    return authTokenFactory;
});


app.factory('Auth', function($http, $q, AuthToken, Passingtoken){

    var authFactory = {};

    authFactory.login = function(email, password){
        var data = {
            email: email,
            password: password
        };

        return $http.post('/loginForm.php', JSON.stringify(data)).then(function(response){
           // console.log(response);
            AuthToken.setToken(response.data);
            return response;
        }).catch(function(e){
            console.log(e);
            return $q.reject(e.data);
        });
    };


    authFactory.logout = function(){
        AuthToken.setToken();
    };

    authFactory.isLoggedIn = function(){
        if(AuthToken.getToken()){
            return true;
        }else{
            return false;
        }
    };

    authFactory.getUser = function(){
        var defer = $q.defer();
        if(AuthToken.getToken()){
            var userdata = JSON.parse(Passingtoken.getUserData());
            userdata = userdata[0].data;
            console.log(userdata);

            /**
             * get the token. Might make this a service that just gets me this token when needed.
             */
            $http.post('/decode.php', {
                userdata
            }).then(function(response){
                console.log(response.data.rows[0]);
                //$scope.username = response.data.rows[0].fullname;
                defer.resolve(response.data.rows[0]);
            }, function(e){
                console.log(e);
            });
        }else{
            return $q.reject({
                message: 'User not found'
            });
        }
        return defer.promise;
    };


    return authFactory;
});


app.factory('AuthInterceptor', function($q, $location, AuthToken){

    var interceptorFactory = {};

    interceptorFactory.request = function(config){
        // grab a token
        var token = AuthToken.getToken();
        // if token is there added to header
        if(token){
            config.headers['x-access-token'] = token;
        }

        return config;
    };

    interceptorFactory.responseError = function (response) {

        if (response.status == 403){   
            AuthToken.setToken();
            $location.path('/login');
        }
        return $q.reject(response);

    };


    return interceptorFactory;
});

这是我正在检查路由更改的主 Controller

app.controller('mainCtrl', ['$scope', 'Passingtoken', '$http','$window', 'Auth', '$location', '$rootScope', function($scope, Passingtoken, $http, $window, Auth, $location, $rootScope){

    // check for loggin in
    $scope.loggedIn = Auth.isLoggedIn();

    // rootscope
    $rootScope.$on('$routeChangeStart', function(event){
        $scope.loggedIn = Auth.isLoggedIn();
        console.log(Auth.isLoggedIn());

        Auth.getUser().then(function(response){
            console.log(response);
            $scope.user = response;
        }).catch(function(error){

            console.log(error);
        });

    });


     $scope.logged = function(){
        if($scope.loginData.email !== '' && $scope.loginData.password !== ''){
            Auth.login($scope.loginData.email, $scope.loginData.password).then(function(response){
                //console.log(response);
                if(response.data !== 'failed'){
                    Passingtoken.addData(response);
                    $location.path("/home");
                    //$window.location.reload();
                }else{

                }
            }, function(e){
                console.log(e);
            });
        }
    };



    /**
     * Logout function
     */
    $scope.logout = function(){
        Auth.logout();

        $scope.username = "";
        $location.path("/");
    }

}]);

在 $rootscope.on 中，我正在检查用户是否拥有 token ，如果用户拥有 token ，则路由可以更改(我使用的是 jwt)，但是如果我通过 url，即使我没有 token ，它也会带我去任何地方 token 。在我的主 Controller 中，我尝试在 .catch() 中添加 $location.path('/') 然后在每条路线更改时它都会带我到那条路径，即使我没有登录并尝试点击登录它会重定向我到那条路，那是有道理的。我只是不知道如何确保用户无法通过 url 进入，angular 应该只检查每个请求。任何帮助将不胜感激。

提前谢谢你

Answer 1

将这部分代码移到应用程序的运行 block 中。

$rootScope.$on('$routeChangeStart', function(event){
        $scope.loggedIn = Auth.isLoggedIn();
        console.log(Auth.isLoggedIn());

        Auth.getUser().then(function(response){
            console.log(response);
            $scope.user = response;
        }).catch(function(error){

            console.log(error);
        });

    });