草庐IT

javascript - Angular 认证

coder 2024-04-21 原文

如果没有找到用户,问题出在每个 $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 应该只检查每个请求。任何帮助将不胜感激。

提前谢谢你

最佳答案

将这部分代码移到应用程序的运行 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);
        });

    });

关于javascript - Angular 认证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40034020/

有关javascript - Angular 认证的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby - token 认证 - 2

    简单代码require'net/http'url=URI.parse('getjson/otherdatahere[link]')req=Net::HTTP::Get.new(url.to_s)res=Net::HTTP.start(url.host,url.port){|http|http.request(req)}putsres.body只是想知道如何在phpcURL中放置身份验证token,我是这样做的    curl_setopt($ch,CURLOPT_HTTPHEADER,array('Authorization:Bearerxxx'));//Bearertokenfora

  3. ruby - HTTParty 摘要认证 - 2

    谁能提供一个使用HTTParty和digestauth的例子?我在网上找不到例子,希望有人能提供一些帮助。谢谢。 最佳答案 您可以在定义类时使用digest_auth方法设置用户名和密码classFooincludeHTTPartydigest_auth'username','password'end 关于ruby-HTTParty摘要认证,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questi

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  6. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss? - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中,html表单使用tinymce将“content”列设置为textarea字段。在首页,因为使用了tinymce,post.html.erb的代码需要用这样的原始方法来实现。.好的,现在如果我关闭浏览器javascript,这个文本区域可以在没有tinymce的情况下输入,也许用户会输入任何xss,比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中,但sanitize方法将相互过滤tinymce样式。例如

  7. ruby-on-rails - Rails with angular 与 Rails pure(查看性能) - 2

    我尝试在Internet上搜索有关使用angularJS进入RubyonRails项目与RubyonRailspure的View性能的信息。我的问题是因为2个月前我开始使用纯AngularJS,现在我需要将AngularJS集成到一个新项目中,但需要展示使用带有RubyonRails的AngularJS呈现View的性能如何,并消除对RubyonRails的负担.例如:带Rails的Angular:使用RubyonRails获取数据(从数据库或GET请求),将信息发送到file.js.erb并使用AngularJS操作数据并显示带有解析数据的View。纯粹的Rails:(自然流程)使用

  8. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因,我必须为Firefox禁用javascript(手动,我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点? 最佳答案 是的,这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  9. ruby-on-rails - 将 Angular JS 与 Rails 集成 - 2

    我需要一些指导来了解如何将Angular整合到rails中。选择Rails的原因:我喜欢他们偏执的做事方式。还有迁移,gem真的很酷。使用angular的原因:我正在研究和寻找最适合SPA的框架。Backbone似乎太抽象了。我不得不在Angular和Ember之间做出选择。我首先开始阅读Angular,它对我来说很有意义。所以我从来没有去读过关于ember的文章。使用Angular和Rails的原因:我研究并尝试使用小型框架,例如grape、slim(是的,我也使用php)。但我觉得需要坚持项目的长期范围。我个人喜欢用Rails的方式做事。这就是我需要帮助的地方,我在Rails4中有

  10. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接? - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序,我想将其转换为Ruby/Watir,因为我现在必须支持Firefox。我发现我真的很喜欢Ruby,而且我正在研究Watir,但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面,实际上是一个表单,只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

随机推荐