req.user 数据未显示在视图中

Question

我有一个快速服务器，其中还安装了 passport-local stategy、passport-local 和 passport-local-mongoose。我想以 json 格式访问当前用户模型以读取和写入数据。我的头疼是该对象不想在我的视图中显示数据。它加载没有错误，我无法理解发生了什么。请帮帮我！

这是我的快速配置：

var express = require('express'),
app = express(),
morgan = require('morgan'),
bodyParser = require('body-parser'),
cookieParser = require('cookie-parser'),
expressSession = require('express-session'),
hash = require('bcrypt-nodejs'),
mongoose = require('mongoose'),
path = require('path'),
passport = require('passport'),
localStrategy = require('passport-local').Strategy,
port = process.env.PORT || 8080,
User = require('./app/models/user'),
routes = require('./app/routes/api');

mongoose.connect('mongodb://localhost:27017/dashboard');
app.use(express.static(__dirname + '/src'));
app.use(morgan('dev'));

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(require('express-session')({
secret: 'keyboard kat',
resave: false,
saveUninitialized: false
}));
app.use(passport.initialize());
app.use(passport.session());

passport.use(new localStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET', 'POST');
res.header('Access-Control-Allow-Methods', 'X-Requested-With, content-          type, Authorization');
next();
});

app.use('/user', routes);

app.get('/', function (req, res) {
res.sendFile(path.join(__dirname + '/src/views', 'index.html'));
});

app.use(function (req, res, next) {
var err = new Error('not found :(');
err.status = 404;
next(err);
});

app.use(function (err, req, res) {
res.status(err.status || 500);
res.end(JSON.stringify({
    message: err.message,
    error: {}
}));
});

app.listen(port);
console.log('Magic happens on port ' + port);

以及我用来提取数据的路线：

router.get('/data', function (req, res) {
res.send(req.user);
});

Сhrome 开发工具返回正确的对象：

Dev Tools

角度服务：

angular.module('main')
.factory('MenuService', function ($http) {

    function getData() {
        $http.get('/user/data')
            .success(function (data) {
                return data;
            });
    }

    return {
        info: getData
    }
});

控制器：

angular.module('main')
.controller('menuController', function ($mdSidenav, MenuService) {
    var vm = this;

    vm.toggleMenu = function () {
        $mdSidenav('menu').toggle();
    };

    vm.info = MenuService.info();

});

最后是视图：

<md-toolbar layout="row" ng-controller="menuController as menu">
<div class="md-toolbar-tools">
    <md-button class="md-icon-button md-primary" ng-click="menu.toggleMenu()" aria-label="open menu">
        <md-icon md-svg-icon="../../assets/img/hmg.svg"></md-icon>
    </md-button>
    <h1>Dashboard</h1>
    <span flex></span>
    <h1>{{menu.info.name}}</h1>
</div>
</md-toolbar>

什么也没有发生 :( 没有视图，没有错误，绝对没有：

Browser

Answer 1

您需要返回一个承诺 在处理异步调用时或使用 pub-sub 模式 来告知您的数据已到达。

发生的情况是 getData 函数被调用，在后台获取数据，但它没有返回给getData 调用者的调用者。为什么？因为在getData 内部没有返回任何内容。有东西需要退货。

这是一个返回承诺的解决方案。

更新：抱歉，有时我忘记了 $http 返回一个包含数据的 resp 对象。据此更新了代码。 所以为您服务：

angular.module('main')
.factory('MenuService', function ($http) {

    function getData() {
        return $http.get('/user/data'); //no preprocessing just returning the result of the http call
    }

    return {
        info: getData
    }
});

在你的控制器中

angular.module('main')
.controller('menuController', function ($mdSidenav, MenuService) {
    var vm = this;

    vm.toggleMenu = function () {
        $mdSidenav('menu').toggle();
    };
    //todo this will be called whenever menuController gets initiated
    //better to put into user action or run only one time...
    MenuService.info().then(function(resp){
       console.log(resp); //here is the response
       vm.info = resp.data;
    }, function(err){
       //todo when no data arrived
    });

    return vm;
});

根据docs，.success 和 .error 也被弃用

不推荐使用 $http 旧式承诺方法成功和错误。请改用标准 then 方法。如果 $httpProvider.useLegacyPromiseExtensions 设置为 false，那么这些方法将抛出 $http/legacy 错误。

Answer 2

您可以在异步调用中编写此语句。

return vm;

您的vm 只不过是this 对象。您不需要从控制器返回它。

您的controller as 语法会自动将this 对象绑定到范围对象。

请删除它。

让剩下的语句保持原样。

MenuService.info().then(function(resp){
       console.log(resp); //here is the response
       vm.info = resp.data;
    }, function(err){
       //todo when no data arrived
    });