req.user 视图中未显示数据

req.user data not displayed in the view

我有一个带有 passport-local 策略的 express 服务器,passport-local 和 passport-local-mongoose 也 installed.I 想要访问当前用户模型 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 开发工具 returns 正确的对象:

Dev Tools

Angular 服务:

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

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

发生的事情是 getData 函数被调用,在后台获取数据,但它没有 returned 到 getData 调用者的调用者。为什么?因为在 getData 里面什么都没有 returned。有些东西需要 returned。

这是一个解决方案return承诺。

Update :抱歉,有时我忘记了 $http return 是一个具有数据的 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;
});

另外 .success.error 根据 docs

被弃用

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

你可以在异步调用中写这个语句。

return vm;

你的 vm 只是 this object.You 不需要 return 来自控制器。

您的 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
    });