調和Express（Passport）和AngularJS路由

Question

我正在構建一個MEAN-stack應用程序，最終達到了創建用戶身份驗證的目的。 為此，我遵循了本教程： http : //code.tutsplus.com/tutorials/authenticating-nodejs-applications-with-passport--cms-21619

現在，當我將其合並到我的項目中時，它可以工作，但只有一部分。 即，似乎唯一可以正確導航到的頁面是應用程序的主頁。 如果單擊任何鏈接或在地址欄中鍵入除home以外的其他內容，則會帶我回到登錄屏幕。

有哪些可能的原因？

我的routes / index.js文件如下所示：

var express = require('express');
var router = express.Router();

var isAuthenticated = function (req, res, next) {
    // if user is authenticated in the session, call the next() to call the next request handler 
    // Passport adds this method to request object. A middleware is allowed to add properties to
    // request and response objects
    if (req.isAuthenticated())
        return next();
    // if the user is not authenticated then redirect him to the login page
    res.redirect('/');
}

module.exports = function(passport){

    /* GET login page. */
    router.get('/', function(req, res) {
        // Display the Login page with any flash message, if any
        res.render('index', { message: req.flash('message') });
    });

    /* Handle Login POST */
    router.post('/login', passport.authenticate('login', {
        successRedirect: '/home',
        failureRedirect: '/',
        failureFlash : true  
    }));

    /* GET Registration Page */
    router.get('/signup', function(req, res){
        res.render('register',{message: req.flash('message')});
    });

    /* Handle Registration POST */
    router.post('/signup', passport.authenticate('signup', {
        successRedirect: '/home',
        failureRedirect: '/signup',
        failureFlash : true  
    }));

    /* GET Home Page */
    router.get('/home', isAuthenticated, function(req, res){
        res.render('home', { user: req.user });
    });

    /* Handle Logout */
    router.get('/signout', function(req, res) {
        req.logout();
        res.redirect('/');
    });

    return router;
}

我還在另一個文件中指定了一些AngularJS路由（在開始添加身份驗證之前，應用程序與這些路由完美配合）。

app.config(['$routeProvider', function($routeProvider){
    $routeProvider

        .when('/', {
            templateUrl: 'partials/home.html',
            controller: 'HomeCtrl'
        })

        .when('/calendar',{
            templateUrl: 'partials/calendar.html',
            //controller: 'Calendar'
        })

        .when('/add-activity', {

            templateUrl: 'partials/activity-form.html',
            controller: 'AddActivityCtrl'
        })

        .when('/activity/:id',{
            templateUrl: 'partials/activity-form.html',
            controller: 'EditActivityCtrl'
        })

        .when('/activity/delete/:id', {
            templateUrl: 'partials/activity-delete.html',
            controller: 'DeleteActivityCtrl'
        })

        .otherwise({
            redirectTo: '/'
        });
}]);

我有什么想念的嗎？

附言：我注意到目前我的主頁網址是

HTTP：//本地主機：3000 /家居＃/

以前是

HTTP：//本地主機：3000 /＃/

我添加了“ home”以區別於認證頁面的“ /”； 但是，我不確定如何在第一個引號中添加“＃”。

Answer 1

我能夠如下解決此問題。 我將Express路由更改為包含一個

“登錄”

路線並將原路線更改為

“/”

結果，原路變成

HTTP：//本地主機：3000 /＃/

哈希符號由Angular加上。 據我了解，Angular將此類路徑視為“ /”。 然后，剩下的路由由Angular完成，我有一個單頁AngularJS應用。

工作代碼：Express

var express = require('express');
var router = express.Router();

module.exports = function(passport){

    var isAuthenticated = function (req, res, next) {
            // if user is authenticated in the session, call the next() to call the next request handler 
            // Passport adds this method to request object. A middleware is allowed to add properties to
            // request and response objects
            if (req.isAuthenticated()){
                //console.log(next());
                return next();
            }
            // if the user is not authenticated then redirect him to the login page
            res.redirect('/login');
    }


    /* GET login page. */
    router.get('/login', function(req, res) {
        // Display the Login page with any flash message, if any
        res.render('login', { message: req.flash('message') });
    });

    /* Handle Login POST */
    router.post('/login', passport.authenticate('login', {
        successRedirect: '/',
        failureRedirect: '/login',
        failureFlash : true  
    }));

    /* GET Registration Page */
    router.get('/signup', function(req, res){
        res.render('register',{message: req.flash('message')});
    });

    /* Handle Registration POST */
    router.post('/signup', passport.authenticate('signup', {
        successRedirect: '/',
        failureRedirect: '/signup',
        failureFlash : true  
    }));

    /* GET Home Page when logged in */
    router.get('/', isAuthenticated, function(req, res){
        res.render('index', { user: req.user });
    });

    /* GET Home Page */
    router.get('/', isAuthenticated, function(req, res){
        res.render('index', { user: req.user });
    });

    /* Handle Logout */
    router.get('/signout', function(req, res) {
        req.logout();
        res.redirect('/login');
    });

    return router;
}

工作代碼：Angular

app.config(['$routeProvider', function($routeProvider){
    $routeProvider

        .when('/', {
            templateUrl: 'partials/home.html',
            controller: 'HomeCtrl'
        })

        .when('/calendar',{
            templateUrl: 'partials/calendar.html',
            //controller: 'Calendar'
        })

        .when('/add-activity', {

            templateUrl: 'partials/activity-form.html',
            controller: 'AddActivityCtrl'
        })

        .when('/activity/:id',{
            templateUrl: 'partials/activity-form.html',
            controller: 'EditActivityCtrl'
        })

        .when('/activity/delete/:id', {
            templateUrl: 'partials/activity-delete.html',
            controller: 'DeleteActivityCtrl'
        })

        .otherwise({
            redirectTo: '/'
        });
}]);