在 WEB 应用程序中重定向到不同 URL 的正确方法是啥？

Posted 2023-02-25

【中文标题】在 WEB 应用程序中重定向到不同 URL 的正确方法是啥？

【英文标题】：What is the right way to redirect to a different URL inside the WEB application?在 WEB 应用程序中重定向到不同 URL 的正确方法是什么？

【发布时间】：2015-03-14 12:59:59

【问题描述】：

我有一个非常小的“实验室”应用程序，我正在为学习建议编写它。 这包括一个登录页面，以及成功登录后的单页应用程序。 Node.js 的后端与 Express.js 和客户端是 Angular.js

最初请求页面时，我成功地使用 res.sendFile 提供登录页面，但是当我检测到成功登录时，我发送主 APP 页面，但没有任何反应。

这里是代码

当成功登录时，重定向到应用页面

var loginRequest = function( req, res, next ) 

var user = req.body.user;
var password = req.body.pass;

if ( user === '' || password === '' ) 

    //Some field is blank - insufficient information
    console.log('User login failure: Insufficient data');
    res.json(400, );

 else 
    models.account.loginRequest ( user, password, function ( result )    
    console.log ( result );
    if ( result != null ) 
        console.log('Login Succesful');
        userSession = req.session;
        userSession.user = user;
        res.redirect( 301,  '../app' );

     else 
        console.log('Login NOT Succesful');
        res.status(401).json();
    
    );

在上面的代码中，目的是当我成功登录时，我会重定向到已经创建会话的应用页面。

res.redirect( 301, '../app' );

那么，然后这个/app路径被请求，下面的代码服务器它

var serveApp = function( req, res, next ) 

console.log('--- sending app.html --- *hopefully');
var options = 
    root: publicPath,
    dotfiles: 'deny',
    headers: 
    'x-timestamp': Date.now(),
    'x-sent': true
    
;

res.sendFile( 'app.html', options);

;

您注意到有服务器 console.log() 只是为了尝试了解正在发生的事情。我在节点控制台上看到的是：

POST /users/loginRequest 301 9.266 ms - 40
--- sending app.html --- *hopefully
GET /app 200 41.145 ms - 140

在 Chrome 上的开发人员工具上，我可以看到该文件已提供，但在 Chrome 本身上，它永远不会从要求用户和密码凭据的页面移动。

您能否帮助我理解为什么这不起作用，或者，如果我做错了，那么正确的做法是什么？

谢谢

【参考方案1】：

我对某人有用的情况，最后我所做的是回答来自节点的响应 200 并处理 Angular 上的重定向

angular.module('loginToApp', [])
.constant ( 'loginURL', '/users/loginRequest')
.controller ( 'loginCtrl', function( $scope, $http, $window, loginURL ) 

    $scope.data = [
     inEmail: '', inPass: '', loginError: false 
    ];

    $scope.loginRequest = function( user, pass ) 

    console.log('--- LoginRequest ---');
    console.log('User: ' + user);
    console.log('Pass: ' + pass);
    console.log('LoginRequest: ' + loginURL );

    $http.post ( loginURL,
             
             user: user,
             pass: pass
             ,
              withCredentials: true )

        .success ( function( data, status, headers, config ) 
        console.log('--- SUCCESS ---');
        console.log('Data');
        console.log(data);
        console.log('Status');
        console.log(status);
        console.log('Headers');
        console.log(headers);
        console.log('Config');
        console.log(config);

        var appWindow = 'http://' + $window.location.host + data.appPath;
        console.log('--- APP window ---');
        console.log(appWindow);
        console.log('--- APP window ends ---');
        $window.location.href = appWindow;

        )
        .error ( function( data, status, headers, config ) 
        console.log('--- ERROR ---');
        console.log('Data');
        console.log(data);
        console.log('Status');
        console.log(status);
        console.log('Headers');
        console.log(headers);
        console.log('Config');
        console.log(config);

        if ( status != 301 ) 
            loginError ( true );
        
    );
    ;

    var loginError = function( bool ) 
    $scope.data.loginError = bool;
    

);

当然，console.log 只是了解正在发生的事情的初学者（比如我自己），但不是必需的。