或 - 编辑：

Question

我正在通过创建一个小应用程序来学习AngularJS。

我在登录成功时将用户信息存储在sessionStorage中。

LoginController.JS

app.controller("LoginCntrl", function ($scope, $location, angularService) {

    $scope.Login = function () {
        var UserName = $scope.UserName;
        var Password = $scope.Password;

        var getData = angularService.LoginInformation(UserName,Password);
        getData.then(function (msg) {
            if (msg.data == '') {
                alert('no data');
            } else {
                sessionStorage.UserName = msg.dataUserName;
                $location.path('/members');
            }

        }, function (error) {
            alert('error in Login');
        });
    };
});

成功登录后，我将用户重定向到'/ memberList'并在 memberlistCntrl controller我正在检查sessionStorage是否为空。如果它是空的，那么我假设用户试图在没有登录的情况下访问该站点，我将用户发送回登录屏幕

memberlistCntrl中的代码

app.controller("memberlistCntrl", function ($scope, $location, allMembers) {

    if (sessionStorage.length == 0)
    {
        $location.path('/login');
        return;
    }

    $scope.MembersList = allMembers.data;

    $scope.createmember = function (path) {
        $location.path(path);
    };
});

我的问题，

检查用户是否登录是否正确？
sessionStorage是将数据存储在“Session”中的正确对象，以便我可以通过我的所有页面或网站访问它吗？
有没有更好的方法来实现同样的目标？

Answer 1

我的问题，


检查用户是否登录是否是正确的方法？

sessionStorage是将数据存储在＆＃34;会话＆＃34;以便   我可以通过我的所有页面或网站访问它？

嗯，这取决于你的用例。页面会话结束时会清除sessionStorage。只要浏览器处于打开状态，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。 在新标签页或窗口中打开页面将导致启动新会话。

因此，如果您希望用户注销另一个tab，您可以继续使用sessionStorgae。但是，在大多数网站中情况并非如此（您是否可以在另一个标签中打开问题时从stackoverflow注销？）。

有没有更好以其他方式来完成相同的工作？

是。您可以使用 localStorage 或 Cookie 。 Stackoverflow将此信息保存在名为usr的cookie中。

如果您使用chrome，请打开控制台（F12）。

转到资源＆gt; Cookie并删除usr。刷新页面，您将被注销。

Gmail，Facebook使用了类似的技术。

现在AngularJS提供$cookies服务来获取/设置或删除cookie。

cookies优先于localStorage个对象跟踪登录状态的原因是：Cookie随每个请求/响应周期传递到服务器，因此可在服务器端获得。如果您没有获得特定请求所需的cookie，您只需抛出状态401（未授权）消息。

Answer 2

Angular支持$ cookieStore来存储你的值。请参阅下面的示例。

angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
  // Put cookie
  $cookieStore.put('myFavorite','oatmeal');
  // Get cookie
  var favoriteCookie = $cookieStore.get('myFavorite');
  // Removing a cookie
  $cookieStore.remove('myFavorite');
}]);

参考：https://docs.angularjs.org/api/ngCookies/service/ $ cookieStore

或 - 编辑：

如果要使用sessionStorage进行数据存储，则需要使用$ window.sessionStorage。我建议你举一个例子。

<a href="javascript:void(0)" ng-click="addItem('111')">Add item in session</a>

$scope.addItem = function(item){
    $window.sessionStorage.setItem(id,item);
}

Answer 3

我假设您不想违反DRY原则并复制和粘贴检查每个控制器中的身份验证的代码

if (sessionStorage.length == 0)
{
    $location.path('/login');
    return;
}

而是尝试在一个地方使用$routeChangeStart，以防止用户在未经过身份验证时转到页面。

如何实现此目的的示例：http://fdietz.github.io/recipes-with-angular-js/urls-routing-and-partials/listening-on-route-changes-to-implement-a-login-mechanism.html

使用AngularJS在Session中存储数据

LoginController.JS

memberlistCntrl中的代码

3 个答案:

或 - 编辑：