在Angular App中设置登录名

Question

我正在尝试为有角度的应用程序实现永久登录。 永久表示我可以重定向到新页面或刷新而无需注销。 这是一个分为两个部分的问题。

1）我很确定我的登录名有效，但是我的注销按钮给了我一个POST http://localhost:3000/api/sessions 500 (Internal Server Error)

2）现在，刷新或重定向第三方身份验证后，我无法将用户名显示在我的应用程序的右上角。 （我还应该提到我正在使用getUser（）并获取GET http://localhost:3000/api/users 401 (Unauthorized)

我的代码是：

html

<section class="top-bar-section" ng-controller="LoginCtrl">
    <ul class="right">
      <li>
        <a ui-sref="dashboard">Dashboard</a>
      </li>
      <li class="pink">
        <a ui-sref="post-item">Post New Item!</a>
      </li>
      <li>
        <a ng-click='logout()'>Logout</a>
      </li>
      <li class="has-dropdown">
        <a href=""><span ng-if="currentUser">{{ currentUser.username }}</span></a>
        <ul class="dropdown">
          <li><a href="http://google.com">Settings</a></li>
          <li><a ng-click="logout()">Logout</a></li>
        </ul>
      </li>
    </ul>
  </section>

routes.js

  app.post('/api/sessions', function(req, res, next) {
    User.findOne({username: req.body.username})
    .select('password').select('username')
    .exec( function(err, user){
      if (err) {return next(err)}
      if (!user) {return res.send(401)}
      bcrypt.compare(req.body.password, user.password, function (err, valid){
        if (err) {return next(err)}
        if (!valid) {return res.send(401)}
        var token = jwt.encode({username: user.username}, config.secret)
        res.send(token)
      })
    })
  })

  app.get('/api/users', function(req, res, next) {
    if(!req.headers['x-auth']){
      return res.send(401)
    }
    var auth = jwt.decode(req.headers['x-auth'], config.secret)
    User.findOne({username: auth.username}, function (err,user){
      if (err) {return next(err)}
        res.json(user)
    })
  })

  app.post('/api/users', function(req, res, next) {
    var user = new User({username: req.body.username})
    bcrypt.hash(req.body.password, 10, function (err, hash){
      if (err) {return next (err)}
      user.password = hash
      user.save(function (err){
        res.send(201)
      })
    })
  })

angular.js

 app.service('UserSvc', function($http, $window){
    var svc = this;
    svc.getUser = function() {
      return $http.get('/api/users',{
        headers: { 'X-Auth': this.token }
      })
    }
    svc.login = function(username, password){
      return $http.post('/api/sessions', {
        username: username, password: password
      }).then(function(val){
        svc.token = val.data
        // window.localStorage.token = val.data
        return svc.getUser()
      })
    }

    svc.logout = function() {
      $http.post('/api/sessions', {
        username: null, password: null
      }).then(function(val){
        svc.token = null
        // window.localStorage.token = val.data
      })
    }
  })

  app.controller('LoginCtrl', function($scope, $location, UserSvc){
    $scope.login = function(username, password) {
      UserSvc.login(username, password)
      .then(function(response) {
        $scope.$emit('login', response.data)
        $location.path('/dashboard');
      })
    }
    $scope.logout = function() {
      UserSvc.logout();
      $scope.$emit('logout')
    }
  });

  app.controller('ApplicationCtrl', function($scope, UserSvc) {

    angular.element(document).ready(function () {
      $scope.currentUser = UserSvc.getUser();
    })

    $scope.modalShown = true;

    $scope.$on('login', function (_, user){
      $scope.currentUser = user;
    })

    $scope.$on('logout', function (){
      $scope.currentUser = null;
    })
  });

如果有人有任何指示，请告诉我！ 我已经花了很多时间在此:(

Answer 1

1）当您注销时， /api/sessions端点正在数据库中寻找用户名为null的用户，并带有对User.findOne({username: null})

2）getUser（）使用'X-Auth'设置标题（注意大写字母），但是您正在使用!req.headers['x-auth']在用户端点检查小写字母

Answer 2

为了使客户端持久化，我将使用angular的$ cookieStore服务将令牌保存在本地存储中。 它是键值存储。 要将令牌存储在存储中，请使用：
$cookieStore.put('token', data.token)
并找回使用：
$cookieStore.get('token')

希望能有所帮助

Answer 3

@XxscurvyxX：您也可以使用$ window.sessionStorage，它在键/值对的基础上工作，并提供getter和setter方法。

句法：

$window.sessionStorage.setItem(key, value) // key: String value: String
$window.sessionStorage.getItem(key) // key: String

键/值对存储在会话存储中，直到您关闭选项卡或关闭浏览器。