协调 Express (Passport) 和 AngularJS 路由

Question

我正在构建一个 MEAN-stack 应用程序，并最终开始创建用户身份验证。为此，我遵循了本教程：http://code.tutsplus.com/tutorials/authenticating-nodejs-applications-with-passport--cms-21619

现在，当我将它合并到我的项目中时，它可以工作，但只是部分工作。也就是说，似乎我可以正确导航到的唯一页面是应用程序的主页。如果我单击任何链接或在地址栏中键入除主页以外的其他内容，它会将我带回登录屏幕。

这可能是什么原因？

我的 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: '/'
        });
}]);

我有什么遗漏吗？

附：我注意到目前我的主页 URL 是

http://localhost:3000/home#/

以前是

http://localhost:3000/#/

我添加了“home”以区别于“/”，这是身份验证页面；但是，我不确定如何将“#”附加到第一个引号中的路径上。

Answer 1

我能够按如下方式解决此问题。我更改了 Express 路由以包含一个

“登录”

route 并将 home route 更改为 just

"/"

结果，home路径变成了

http://localhost:3000/#/

井号是由 Angular 加上的。据我了解，Angular 将此类路径视为“/”。然后，剩下的路由由 Angular 完成，我有一个单页 AngularJS 应用程序。

工作代码： 快递

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: '/'
        });
}]);