承诺从服务解决后更新视图

时间:2016-04-07 23:07:45

标签: javascript angularjs laravel

我使用Laravel作为我的后端,作为用户身份验证和任何CRUD操作的API。我似乎无法在角度边工作上获得用户身份验证的这种实现。我想要的只是通过调用fetchUser()从API加载的用户,然后可以从getUser()中检索用户。我没有使用Angular进行路由,因此我无法在解析时进行渲染。我想通过使用promises Angular会自动更新视图。我想我不理解整个摘要过程,因为我做的任何事情都不会在用户加载后改变视图。简单的ng-show="user.$resolved"或甚至ng-show="user"不起作用。该页面保持在承诺解决之前的状态。有什么明显的东西我做错了吗?或者更好的方法来实现这个?我不太担心安全性,它不是一个非常实用的网站。只是一个我可以获取的API对象,如果他们已经登录并以某种方式显示页面,那么它们是什么角色。

controllers.js

var Controllers = new angular.module("Controllers", []);

Controllers.controller("MainController", ["$scope", "$location", "Auth", "$timeout", function($scope, $location, Auth, $timeout) {

    $scope.user = Auth.fetchUser().then(function(data) {
        $scope.user = data;
        console.log(data);
    });

}]);

services.js

Services.factory("Auth", function($http, $q) {

    var user;

    function getUser() {
        return user;
    }

    function fetchUser() {
    return $http.get("api/auth").then(function(response) {
        if (response.data.user) {
            user = response.data.user;
        } else {
            user = null;
        }
        return user;
    });
}

    return {
        getUser: getUser,
        fetchUser: fetchUser
    };

});

master.blade.php

<div class="container">

    @include("layouts/nav")

    @yield("content")

</div>

nav.blade.php(部分)

<ul class="nav navbar-nav navbar-right">
    <li><a href="/inquire">Inquire</a></li>
    <li ng-show="user.$resolved && user.id"><a href="/profile">Profile</a></li>
    <li ng-show="user.$resolved && user.role === 'User'"><a href="/admin/dashboard">Admin</a></li>
    <li ng-hide="user.$resolved && user.id"><a href="/login">Login</a></li>
    <li ng-hide="user.$resolved && user.id"><a href="/register">Register</a></li>
</ul>

当用户登录时,登录和注册仅显示用户尚未加载/登录。

1 个答案:

答案 0 :(得分:0)

问题是,您在$http承诺解析器中返回整个响应对象。通过在延迟对象中包装基于promise的API($http),您也成为了延迟的promise反模式的牺牲品。

试试这个......

function fetchUser() {
    return $http.get('api/auth').then(function(response) {
        if (response.data.user) {
            return response.data.user;
        }
        return $q.reject('No user data');
    });
}

Auth.fetchUser().then(function(data) {
    $scope.user = data;
    console.log(data);
});