Question

我可以使用goh 2.0 google成功登录。页面在正确验证后重定向，但问题是如何设置登录按钮以注销。

我尝试使用ng-if，但它无效。以前，我在localstorage中有jwt令牌，并且有一个布尔值来更改登录按钮状态但是使用开放式身份验证我无法将按钮更改为“注销”

以下是州提供者：

myApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {

    // For any unmatched url, redirect to /login
    $urlRouterProvider.otherwise("/Login");

    var header = {
        templateUrl: 'views/Header.html',
        controller: function ($scope) {
        }

    };
    var footer = {
        templateUrl: 'views/Footer.html',
        controller: function ($scope) {
        }
    };
    // Now set up the states
    $stateProvider
            .state('Login', {
                url: "/Login",
                views: {
                    header: header,
                    content: {
                        templateUrl: 'views/Login.html',
                        controller: function ($scope) {
                        }
                    },
                    footer: footer
                }
            })
            .state('LoggedIn', {
                url: "/LoggedIn",
                views: {
                    'header': header,
                    'content': {
                        templateUrl: 'views/LoggedIn.html',
                        controller: function () {
                        }
                    },
                    'footer': footer
                },
                data: {
                    requiresLogin: true
                }
            })
            .state('AboutUs', {
                url: "/AboutUs",
                views: {
                    'header': header,
                    'content': {
                        templateUrl: 'views/AboutUs.html',
                        controller: function () {
                        }
                    },
                    'footer': footer
                },
                data: {
                    requiresLogin: true
                }
            })
            .state('access_token', {
                url: '/access_token={accessToken}&token_type={tokenType}&expires_in={expiresIn}',
                views: {
                    'header': header,
                    'content': {
                        templateUrl: 'views/LoggedIn.html',
                        controller: function ($stateParams, $localStorage, $rootScope) {
                            var accessToken = $stateParams.accessToken;
                            if($stateParams.accessToken){
                                $localStorage.token = accessToken;
                                $rootScope.isLogin = true;
                                console.log("Token is: " + $localStorage.token);
                            }
                        }
                    },
                    'footer': footer
                }
            })
            .state('ContactUs', {
                url: "/ContactUs",
                views: {
                    'header': header,
                    'content': {
                        templateUrl: 'views/ContactUs.html',
                        controller: function () {
                        }
                    },
                    'footer': footer
                }
            })
            .state('SearchJobs', {
                url: "/SearchJobs",
                views: {
                    'header': header,
                    'content': {
                        templateUrl: 'views/SearchJobs.html',
                        controller: function () {
                        }
                    },
                    'footer': footer
                }
            });

    $httpProvider.interceptors.push(['$q', '$location', '$localStorage', 'jwtHelper', function ($q, $location, $localStorage, jwtHelper) {
            return {
                'request': function (config) {
                    config.headers = config.headers || {};
                    if ($localStorage.token) {
                        var claims = jwtHelper.decodeToken($localStorage.token);
                        config.headers.Email = claims.email;
                        config.headers.Role = claims.role;
                        config.headers.Authorization = 'Basic ' + $localStorage.token;
                    }
//                    else{
//                        config.headers['Authorization'] = 'Basic ' + $localStorage.token;
//                        $http.defaults.headers.common['Authorization'] = 'Basic <username:pw>';
//                    }
                    return config;
                },
                'responseError': function (response) {
                    if (response.status === 401 || response.status === 403) {
                        $location.path('/Login');
                    }
                    return $q.reject(response);
                }
            };
        }]);
});

带有ng-if的html：

<a href ng-if="isLogin" ng-click="logout()"><b>Logout</b></a>

<a href ng-if="!isLogin" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>

Answer 1

使用ng很好 - 如果这样，它只取决于你是否想要在你的DOM中使用该元素。

首先，不要将$ rootScope用于变量，因为它很容易被其他控制器或类似的东西覆盖。它暴露在你的整个应用程序中。

LoggedIn.html有您发布的HTML吗？

确保$ stateParams.accessToken在任何情况下都为true。然后在你的控制器中尝试（注入$ scope）：

var accessToken = $stateParams.accessToken;
$scope.isLoggedIn = false;
   if($stateParams.accessToken){
       $localStorage.token = accessToken;
       $scope.isLoggedIn = true;
  }

在HTML中写下如下内容：

<a href ng-if="isLoggedIn" ng-click="logout()"><b>Logout</b></a>

<a href ng-if="!isLoggedIn" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>

使用ng-show / ng-hide：

<a href ng-show="isLoggedIn" ng-click="logout()"><b>Logout</b></a>

<a href ng-hide="isLoggedIn" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>

在oauth身份验证后更改登录按钮以注销

1 个答案: