Question

目前有一个带

的小应用程序

登录视图'/login'
主页视图'/home'
登录主页视图'/dashboard'

当用户登录后导航到主页我想向他显示登录主页。我尝试向redirectUrl提供$routeProvider。如果我返回一个空字符串，它会停留在页面上，如果它返回一个像'/dashboard'这样的字符串，那么它会重定向到仪表板。

问题是我无法在配置中的该功能中检查用户是否已登录。因为我无法将UserService注入其中。

main.js

var myApp = angular.module('myApp', ['ngRoute', 'ngAnimate']);

myApp.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) {

    $routeProvider.when(
        // entry point, the main route of the app
        '/', {
            redirectTo: '/home'
        }
    )
    .when(
        // home page, entrypoint when a user is not logged in.
        '/home', {
            redirectTo: function redirectHome() {
                // need to get the loggedInState here... preferably not on the window :p
                return (window.isLoggedIn) ? "/dashboard" : "";
        },
            action: 'splash.home'
        }
    )
    .when(
        // specific route to the login popup on the homepage
        '/login', {
            action: 'splash.home.login'
        }
    )
    .when(
        // dashboard after being logged in
        '/dashboard', {
            action: 'base.dashboard'
        }
    )
});

保存用户状态的UserService：

myApp.service('UserService',
    [
        '$http',
        function UserService($http) {

            // --- Service Variables. ------------------- //

            // url to the service that returns the logged in user details
            var userServiceUrl = '/user/data/me';

            // Store the current user.
            var User = {
                isLogged: false,
                apps: [],
                data: {}
            };

            // --- Service Methods. ------------------- //

            // Return whether the user is logged in
            function isLoggedIn() {
                return User.isLogged;
            }

            // Return the current user
            function getUser(fn) {
                fn = fn || function callback() {};

                if (!User.isLogged) {
                    return fetchUser(fn);
                } else {
                    return fn(User);
                }
            }

            // set the current user
            function setUser(user, loggedIn) {
                loggedIn = loggedIn || false;
                User.isLogged = loggedIn;
                User.data = user;
            }

            // get the user from the server
            function fetchUser(fn) {
                $http.get(userServiceUrl).success(function onGetUserSuccess(data, status, headers, config) {
                    if (data.success) {
                        setUser(data.data, data.success);
                    }

                    if (fn !== undefined) {
                        fn(User);
                    }
                })
                .error(function onGetUserError(data, status, headers, config) {
                    setUser({}, false);
                });
            }

            // --- Return Public API. ------------------- //

            return {
                isLoggedIn: isLoggedIn,
                getUser: getUser,
                setUser: setUser
            };

        }
    ]
);

有没有办法从配置中进入用户状态？没有它是公开的（我不想让窗口对象上的用户可访问...）

或者我应该从cookie或其他系统获取该信息吗？

Answer 1

按工厂更改服务，并将其作为依赖项注入您的运行块而非配置中。

事实上，如果你想使用服务提供商而不是facotry，你必须将你的功能附加到此。如果使用return语句，请使用工厂。

应该有效。

另一种方法是使用httpInterceptor来知道用户是否被记录......这是一种常见的模式。如果你想知道问题，我会详细解释你。

AngularJS：将用户重定向到不同的视图，无论他是否登录

1 个答案: