角度身份验证

时间:2016-10-14 02:34:00

标签: javascript php angularjs authentication routing

问题出在每个$ routeChangeStart上,如果没有找到用户,如果我只输入网址,它仍会将我引导到页面。

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

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

    });
}]);

这是我的角度认证工厂

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

这是我正在检查路线变化的主控制器

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我正在检查用户是否有令牌,如果用户有,那么路由可以改变(我正在使用jwt),但是如果我通过url然后它将带我到任何地方,即使我没有'有令牌。在我的主控制器中,我尝试在.catch()中添加$ location.path(' /')然后在每次路由更改时它将带我到该路径,即使我没有登录并尝试单击在登录时它会将我重定向到那条路径,这是有道理的。我只是迷失了如何确保用户无法通过网址和角度来检查每个请求。任何帮助将不胜感激。

提前谢谢

1 个答案:

答案 0 :(得分:0)

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

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

    });