AngularJs，更改菜单项，无论用户是否连接

Question

我是一名新手，正在学习AngularJS并尝试处理用户身份验证。

我确保未连接的用户无法访问受限路由：

app.js

  .config(function ($routeProvider) {
    $routeProvider
        .when('/myroute', {
          templateUrl: 'views/myroute.html',
          controller: 'MyrouteCtrl',
            access: {
                isFreeAccess: false
            }
        })
 ...
 .run( function ($rootScope, $location, Auth) {

    $rootScope.$on('$routeChangeStart', function(currRoute, prevRoute){

        if (prevRoute.access != undefined) {
            // if route requires auth and user is not logged in
            if (!prevRoute.access.isFreeAccess && !Auth.isLogged) {
                // redirects to index
                $location.path('/');
            }
        }

AuthService.js

.factory('Auth', function () {
    var user;

    return{
        setUser : function(aUser){
            user = aUser;
        },
        isLoggedIn : function(){
            return(user)? user : false;
        }
    }
});

login.js

$scope.login = function(user) {

    $http({
        url: ***,
        method: "POST",
        data: user,
        headers: {'Content-Type': 'application/json'}
    }).success(function (data, status, headers, config) {
            $scope.persons = data;

            Auth.setUser(data); //Update the state of the user in the app

            $location.path("/");
    }).error(function (data, status, headers, config) {
        $scope.status = status;
    });

用户状态在连接时被存储。现在我想在导航栏中显示新项目。

index.html

<div ng-include src="'views/navbar.html'"></div>

navbar.js

.controller('NavbarCtrl', function ($scope) {
    $scope.items = [
        {'name': 'Home', "needAuthentication": false},
        {'name': 'About', "needAuthentication": false},
        {'name': 'Settings', "needAuthentication": true},
        {'name': 'Logout', "needAuthentication": true}
    ];
});

navbar.html

<div ng-controller="NavbarCtrl" class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
        <ul class="nav navbar-nav navbar-right">
            <li ng-repeat="item in items ">
               <a ng-if="item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn())" href="#{{item.name}}">{{item.name}}</a> 
            </li>
        </ul>
    </div>

当用户启动应用程序时：

1）他还没有连接

ng-if="item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn ())"

显示“主页”和“关于”菜单项。

2）然后他连接到应用程序，但导航栏未重新渲染以显示其他菜单项（“设置”和“注销”）。

正确的方法是什么？使用指令/将其绑定到模型/还是其他方式？

提前致谢。

- isy

Answer 1

我认为当user被定义时，isLoogged函数应该返回true。

尝试进行更改。

return(user)? user : false;

to

return(user)? true : false;

- M22an

---

我已经尝试过这个解决方案，但它并没有解决问题。 - isy

好的，在你的控制器中，Auth没有被实例化，如果工厂和服务的工作方式相同，则应在控制器定义中包含它们，如.controller('NavbarCtrl', function ($scope, Auth)，并尝试使用Auth.isLogged()。 - M22an

我将navBar视图的条件移动到navBar控制器中的一个简单函数中。$scope.condition = function(item) { return item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn()); };。这样做可以完成任务，但我不知道为什么当我直接在我的视图的ng-if指令中放置“Auth.isLoggedIn()”条件时它不起作用（即使我在控制器中实例化了Auth）。谢谢您的帮助！ - isy