Question

我遇到使用$stateParams在有人登录我的应用程序后保存用户信息的问题。我有一些登录代码执行POST到Express，使用passport进行身份验证，一旦身份验证完成，请将用户作为响应的一部分发回，然后转到仪表板状态。

登录代码：

User.login = function(user) {
        var defer = $q.defer();         

        $http.post('/login', user)
        .success(function(authenticatedUser) {

            if(authenticatedUser.redirect && authenticatedUser.username) {                  

                $state.go('app.dashboard.main', {userInformation: authenticatedUser});  
                var cookie = Cookie.getSessionCookie();                 

                defer.resolve(authenticatedUser);
            }           

        }, function(err, status) {              
            defer.reject(err);
        });

        return defer.promise;

    };

服务器端（省略了护照代码，它将数据库中的用户对象发回给我）：

app.post('/login', passport.authenticate('local'), function(req, res, next) {
    if(req.user) { //req.user holds the returned session object from the local strategy authentication
        console.log('authentication success');      

        var username  = req.user.username;
        var firstname = req.user.first_name;
        var lastname  = req.user.last_name;
        var userID    = req.user.id;

        var user = {
            username: username,
            firstname: firstname,
            lastname: lastname
        };                      

        res.cookie('user', user, { httpOnly: false, maxAge: 40000 }); //need to set HTTP only to false in order for client to access server side cookie

        res.json({
            redirect: true,         
            username: username,
            firstname: firstname,
            lastname: lastname 
        });
    }   
});

我的信息中心代码：

(function() {
'use strict';

var DashboardCtrl = function($rootScope, $q, $http, User, userInformation, $stateParams) {

    this.user = userInformation;
    this.logout = User.logout;
};

angular
    .module('dashboard', [])

    .config(['$stateProvider', function($stateProvider) {
        $stateProvider
            //child state of 'app'
            .state('app.dashboard', {
                url: '/dashboard',
                abstract: true,
                templateUrl: 'modules/dashboard/dashboard-scaffolding.html',
                data: {
                    //will apply to all children of 'dashboard'
                    requireLogin: true
                }                   
            })
            .state('app.dashboard.main', {
                url: '/main',
                params: {'userInformation': null},
                resolve: {
                    userInformation: ['$stateParams', function($stateParams) {                                              
                        return $stateParams.userInformation;
                    }]
                },
                templateUrl: 'modules/dashboard/dashboard-main.html',
                controller: 'DashboardCtrl',
                controllerAs: 'dashboard'                       
            })          
    }]) 

    .directive('dashboardBody', function() {
        return {
            scope: true,
            restrict: 'AE',
            templateUrl: 'modules/dashboard/directives/dashboard-body-directive.html',
            replace: true
        }
    })

    .controller('DashboardCtrl', ['$rootScope', '$q', '$http', 'User', 'userInformation', '$stateParams', DashboardCtrl]);


})();

当我登陆仪表板时，我正在使用此代码，我看到了用户名：

<div class="row">
    <div class="col-md-12">                     
        <h1>Welcome, {{dashboard.user.username}}!</h1>
    </div>
</div>

我导航HTML的一部分（当我点击个人资料，然后返回主页时，用户名将消失）：

<nav class="dashboard navbar">
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <div class="project-title">
                    <p><a ui-sref="app.dashboard.main">Home</a></p>
                </div>
            </div>
            <div class="col-md-10">
                <div class="right clearfix">
                    <div class="logo">
                        <ul>
                            <li><a href="" class="btn" ui-sref="app.dashboard.profile">Profile</a></li>
                            <li><a class="btn" href="/logout">Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div>          
        </div>
    </div>
</nav>

$stateParams是否会重置＆＃39;每当一个州改变？当我返回家中时，$stateParams的值为null。我宁愿在此存储用户的基本信息，而不是每次更改状态时使用服务进行数据库查询。这是存储用户信息的最佳位置吗？我是否应该始终进行数据库查询以获取它？或者将它存储在会话中？在这里不确定。

Answer 1

Stateparams是URL参数。由于您的URL都没有维护任何值，因此$ stateParams的值总是为null。 Stateparams通常意味着您需要它们来维护特定Web应用程序的状态。

为了更好地理解，您实际上可以参考以下链接：

https://github.com/angular-ui/ui-router/wiki/URL-Routing

形成包含有用信息的网址，这可能是导航到特定状态（例如用户ID）所必需的。例如，将url更改为“/ user /：userId”。实际上，同样可能会变成类似“/ user / 235462aed”的东西。现在，stateparams将是这样的：

$stateparams={   userId: '235462aed' }

您可以在导航到州之前解决此问题。

$ stateParams数据在切换状态后为null

1 个答案: