javascript - 服务解决 promise 后更新 View

Question

我使用 Laravel 作为后端，作为用户身份验证和任何 CRUD 操作的 API。我似乎无法在 Angular 方面实现用户身份验证的工作。我想要的只是通过调用 fetchUser() 从 API 加载用户，然后可以从 getUser() 检索用户。我没有使用 Angular 进行路由，因此我无法使其仅在解析时才渲染。我认为通过使用 Promise Angular 会自动更新 View 。我想我不理解整个摘要过程，因为我所做的任何事情都不会在用户加载后使 View 发生变化。简单的 ng-show="user.$resolved" 甚至 ng-show="user" 都不起作用。该页面保持在 promise 解决之前的状态。有什么明显的我做错了吗？或者也许有更好的方法来实现这一点？我不太担心安全性，它不是一个功能非常丰富的网站。只是一个 API 对象，如果他们已登录以及他们的 Angular 色是什么，我可以获取以某种方式显示页面。

Controller .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);
    });

}]);

服务.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>

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

Answer 1

问题是，您在 $http Promise 解析器中返回整个响应对象。通过将基于 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);
});