AngularJS passportJS用戶在頁面重新加載後註銷

Question

我遵循Chirp MEAN堆棧教程向我的站點添加passportJS身份驗證（https://github.com/hwz/chirp）。

只要我留在單頁面應用程序中，登錄和註冊工作正常（MongoDB中的護照，存儲和查找用戶）。 如果我在瀏覽器中單擊刷新/重新加載，用戶似乎不再被登錄。

有人知道如何拿起重新加載後的頁面的會話/用戶？ 我現在掙扎了好幾天，在網上找不到任何東西。每一個幫助真的很感激。

如果用戶沒有登錄，該網站的菜單要求登錄/註冊。

如果用戶已登錄，該菜單將顯示一個用戶下拉菜單。

在角我用下面的代碼的頁面菜單：

<a ui-sref="signin" class="btn btn-success" role="button" ng-hide="authenticated">Login</a> 
<a ui-sref="register" class="btn btn-primary" role="button" ng-hide="authenticated">Register</a> 

<span class="dropdown" ng-show="authenticated"> 
    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    {{current_user}} 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="usermenu"> 
    <li><a ui-sref="#" ng-click="signout()">Logout</a></li> 
    </ul> 
</span> 

頁面後重裝NG秀=「認證」是虛假的再次。 有一個connect.sid cookie創建並在頁面重新加載後仍然存在。但似乎沒有考慮到。

AngularApp.js樣子：

var app = angular.module('myApp', ['ui.router']); 
... 
app.run(function($rootScope, $http) 
{ 
    $rootScope.authenticated = false; 
    $rootScope.current_user = ''; 

    $rootScope.signout = function() 
    { 
     $http.get('auth/logout'); 
     $rootScope.authenticated = false; 
     $rootScope.current_user = ''; 
    }; 
}); 

我的猜測是，我要在這裏添加代碼？

AuthenticationController.js樣子：

var app = angular.module('myApp'); 

app.controller('authController', function($scope, $http, $rootScope, $location) 
{ 
    $scope.user = {username: '', password: ''}; 
    $scope.error_message = ''; 

    $scope.login = function() 
    { 
    $http.post('/auth/login', $scope.user).success(function(data) 
    { 
     if(data.state == 'success') 
     { 
     $rootScope.authenticated = true; 
     $rootScope.current_user = data.user.username; 
     $location.path('/'); 
     } 
     else 
     { 
     $scope.error_message = data.message; 
     } 
    }); 
    }; 

    $scope.register = function(){ 
    $http.post('/auth/register', $scope.user).success(function(data) 
    { 
     if(data.state == 'success') 
     { 
     $rootScope.authenticated = true; 
     $rootScope.current_user = data.user.username; 
     $location.path('/'); 
     } 
     else 
     { 
     $scope.error_message = data.message; 
     } 
    }); 
    }; 
}); 

Server.js樣子：

var express = require('express'); 
var path = require('path'); 
var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var session = require('express-session'); 
var passport = require('passport'); 

var api = require('./routes/api'); 

var app = express(); 
//initialize mongoose schemas 
require('./models/models'); 
var mongoose = require('mongoose');       //add for Mongo support 
mongoose.connect('mongodb://localhost/myApp'); //connect to Mongo 

app.set('port', process.env.PORT || 3000); 

//Middleware 
app.use(logger('dev')); 
app.use(session({ secret: 'changedforstackoverflow', rolling: true, resave: true, saveUninitialized: false })); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser()); 
app.use(express.static(__dirname + '/../frontend'));  //serve static assets 
app.use(passport.initialize()); 
app.use(passport.session()); 

//// Initialize Passport 
var initPassport = require('./passport-init'); 
initPassport(passport); 

var authenticate = require('./routes/authenticate')(passport); 

app.use('/api', api); 
app.use('/auth', authenticate); 
... 

我可以發佈更多的代碼，如果有幫助。但是據我所知，後端的身份驗證工作正常。重新加載後，只有Angular沒有從cookie獲取會話，對吧？

Answer 1

好的。我終於管理它。

護照正在關注會話和cookie本身，據我瞭解。我也無法讀取cookie中的數據，因爲它受到HTML專有屬性的保護。

那麼，該怎麼辦？ 我在後端添加了控制檯日誌，以查看重新加載請求是否在後端有一個有效的用戶。

我直接加入後server.js（後端/節點）：

app.use('/auth', authenticate): 

此：

app.use(function (req, res, next) { 
    console.log(req.isAuthenticated()); 
    console.log(req.user); 
    next(); 
}); 

我現在已經在服務器控制檯看出，頁的重新加載後的每個請求仍然有一個有效的用戶，但角度不知道它。

我說得對，在我之前發表的一些代碼中加入了一些代碼。 App.run必須從後端獲取用戶數據！

所以我加入這個功能（前端/角）：

app.run(function($rootScope, $http, $location) 
{ 
    $rootScope.loggedIn = function() 
    { 
    $http.post('/auth/isloggedIn').success(function(data) 
    { 
     if(data.state == 'success') 
     { 
     $rootScope.authenticated = true; 
     $rootScope.current_user = data.user.username; 
     $location.path('/'); 
     } 
     else 
     { 
     $rootScope.authenticated = false; 
     $rootScope.current_user = ''; 
     $location.path('/'); 
     } 
    }); 
    }; 

    $rootScope.loggedIn(); 

的肯定，現在我們需要建立在有在後端用戶的loggedIn返回用戶數據的功能。我們在上面的loggedIn函數中調用的url需要做些事情。因此，我已將此添加到身份驗證路由器（後端/節點）：

//is logged in 
router.post('/isloggedin', function(req, res){ 
    if(req.isAuthenticated()) 
    { 
     res.send({state: 'success', user: req.user}); 
    } 
    else 
    { 
     res.send({state: 'failure', user: null}); 
    } 
}); 

最後一個步驟是驗證它的工作原理與多個用戶，所以我花了兩個瀏覽器，並與不同的用戶登錄，並刷新頁面。這兩個用戶在正確識別和「自動登錄」。

Hooray！ ;-)