切换状态后 $stateParams 数据为空

Question

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

登录码：

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 都会得到 'reset' 吗？当我return回到家时，$stateParams的值是null。我宁愿在此处存储用户的基本信息，也不愿在每次更改状态时使用服务进行数据库查询。这是存储用户信息的最佳位置吗？我应该总是进行数据库查询来获取它吗？还是存储在session中？这里不确定。

Answer 1

状态参数是 URL 参数。由于您的 URL 中的 none 保留了任何值，因此 $stateParams 的值对您而言始终为空。状态参数通常意味着您需要它们来维护特定 Web 应用程序的状态。

为了更好理解，其实可以参考这个link:

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

形成包含有用信息的 url，这些信息可能是导航到特定状态所必需的，例如用户 ID。例如，将 url 更改为类似“/user/:userId”的内容。实际上，它可能会变成类似“/user/235462aed”的东西。现在，状态参数将类似于：

$stateparams={   userId: '235462aed' }

您可以在导航至该州之前解决相同问题。

切换状态后 $stateParams 数据为空

$stateParams data null after switching states

angularjs

angular-ui-router

state

switching