使用Angular和Codeigniter根据会话值更改菜单

Change menu based on session value with Angular and Codeigniter

本文关键字：菜单 会话 Angular Codeigniter 使用      更新时间：2023-09-26

我不想在codeigniter中根据会话状态动态显示菜单项。让我向您展示我的代码和以下解释。

这是我的index.html文件

                    <li><p ng-bind-html="link1" ></p></li>
                    <li><p ng-bind-html="link2" ></p></li>

链接数据来自这个控制器

sessionFactory.isLoggedIn().then(function(data){
    var loggedIn = data.logged_in;
    if(loggedIn == true){
        $scope.link1 = $sce.trustAsHtml('<a href="#/my_profile">My profile</a>');
        $scope.link2 = $sce.trustAsHtml('<a ng-click="logOut()" style='"cursor: pointer;" >Logout</a>');
    }else{
        $scope.link1 = $sce.trustAsHtml('<a href="#/login">Login</a>');
        $scope.link2 = $sce.trustAsHtml('<a href="#/register" >Register</a>');
    }
})

这是我的会话工厂

//Factory for Session
app.factory('sessionFactory', ['$http', '$location', function($http, $location){
    var factory = {};
    factory.logOutUser = function(){
        console.log("woot");
        return $http({
            method: 'POST',
            url: $location.protocol() + '://' + $location.host() + '/server/api/users/logout'
        }).then(function successCallback(response) {
            console.log(response);
        },function errorCallback(response) {
            console.log('error logging out: ' + response);
        });
    }
    factory.isLoggedIn = function(){
        console.log("checking login");
        return $http({
            method: 'GET',
            url: $location.protocol() + '://' + $location.host() + '/server/api/users/isLoggedIn'
        }).then(function successCallback(response) {
            console.log(response.data);
            return response.data;
        },function errorCallback(response) {
            console.log('Checking login failed: ' + response);
        });
    }
    /*
    /server/api/users/logoutfactory.currentUserId = function(){
        return $http.get($location.protocol() + '://' + $location.host() + '/server/api/users/userId');
    }
    */
    return factory;
}]);

Api /server/api/users/isLoggedIn返回

{"success":true,"logged_in":true}

或

{"success":true,"logged_in":false}

所以我有一个问题，当用户登录或注销时，<li></li>项目不会改变。我必须按f5刷新网页
如果你需要任何额外的信息，请告诉我，我会提供。

提前谢谢。

您可以使用在$rootScope上激发事件

$rootScope.$emit("authenticationChanged")

当用户登录和注销时，在您的会话工厂上，然后在控制器中运行

function checkIfLogged() {
  var loggedIn = data.logged_in;
  if (loggedIn == true) {
    $scope.link1 = $sce.trustAsHtml('<a href="#/my_profile">My profile</a>');
    $scope.link2 = $sce.trustAsHtml('<a ng-click="logOut()" style='"cursor: pointer;" >Logout</a>');
  } else {
    $scope.link1 = $sce.trustAsHtml('<a href="#/login">Login</a>');
    $scope.link2 = $sce.trustAsHtml('<a href="#/register" >Register</a>');
  }
}
checkIfLogged(); //RUN THE FIRST TIME THE PAGE LOADS
$rootScope.$on("authenticationChanged", function(){
    checkIfLogged(); //RUN WHEN AUTHENTICATION CHANGE
});

有关事件的更多信息，请查看https://docs.angularjs.org/api/ng/type/$rootScope.Scope

您可以尝试使用以下函数来获取链接内容：

<li><p ng-bind-html="getLink1Content(false)"></p></li>
<li><p ng-bind-html="getLink2Content(false)"></p></li>
$scope.getLink1Content = function (loggedIn) {
    var linkContent = loggedIn ? '<a href="#/my_profile">My profile</a>' : '<a href="#/login">Login</a>';
    return linkContent;
};
$scope.getLink2Content = function (loggedIn) {
    var linkContent = loggedIn '<a ng-click="logOut()" style='"cursor: pointer;" >Logout</a>' : '<a href="#/register" >Register</a>';
    return linkContent;
}
sessionFactory.isLoggedIn().then(function(data){
    var loggedIn = data.logged_in;
    $scope.getLink1Content(loggedIn);
    $scope.getLink2Content(loggedIn);
});
相关文章：