使用 Angular ui-router 使用 Express 重定向

Question

如果我去http://localhost:3000 开始我的项目并且我没有登录，它将去http://localhost:3000/login，但我希望它去http://localhost:3000/#/login。除非我在角度前端重定向，否则有什么办法可以做到这一点？还是我做错了？

如果我能在后端以快递方式做到这一点，那将是理想的

我的 Angular 路由文件

$stateProvider
.state('app', {
    abstract: true,
    url: '/app',
    templateUrl: '/layout'
})
.state('app.dashboard', {
    url: '/dashboard',
    templateUrl: '/dashboard',
    ncyBreadcrumb: {
        label: 'Dashboard',
        description: ''
    }
})
.state('login', {
    url: '/login',
    templateUrl: '/login',
    ncyBreadcrumb: {
        label: 'Login'
    }
})

我的快速路由文件

function isLoggedIn(req, res, next) {
    if (req.isAuthenticated()) {
        return next();
    }
    return res.redirect('/login');  //this goes to login but doesn't load properly
    //return res.redirect('/#/login');  //does not work
}

router.get('/', isLoggedIn, function (req, res) {
    return res.render('index');
});

编辑：我添加这个是为了回应@jiajianrong

router.get('/#/login', function (req, res) {
    return res.render('login');
});

并将 isLoggedIn 函数更改为：

return res.redirect('/#/login')

但它说重定向太多是错误的，因为它没有找到它。

编辑 2：

对不起，我不确定我是否明白你想说什么？例如现在..如果没有isLoggedIn检查，它会自动转到仪表板，其中url是http://localhost:3000/#/app/dashboard，因为我相信这里有这行代码？：

$urlRouterProvider.otherwise('/app/dashboard');

但我的 Express 方面没有专门针对 /app/dashboard 的路线。我已经正常工作的仪表板路由是这样的：

router.get('/dashboard', function (req, res) {
    return res.render('dashboard');
});

Answer 1

假设你的主路由是/，它渲染主路由index.(html/ejs)。

现在 angular ui-router 有 3 条类似的路由。

/abc
/xyz
/abc/xyz

所以你需要在 express 中创建 4 条路由，它们会呈现index.(html/ejs)。

或者 如果您的 ui-router 包含app 或其他常用名称作为路径。

/app/abc
/app/xyz
/app/*

然后检查快速路由器或中间件中URL的正则表达式，如果它包含app，则呈现index.(html/ejs)。

Answer 2

在您的router.get() 中，您匹配的是'/'。 isLoggedIn 将响应重定向到/#/login，它也匹配相同的'/'，然后你得到一个圆圈。

res.redirect('/login'); 起作用的原因是您有一个处理“/login”的路由器，这会阻止路由器链转到router.get('/', isLoggedIn, fn)

所以你需要添加一个新的路由器规则来处理/#/login

更新

---

经过研究发现

Browser doesn't send hash part of url to the server, so express.js cannot know about it.

我通过访问 http://127.0.0.1:3000/aaa#/login 进行了演示测试验证

var url = require('url');
var url_parts = url.parse(req.url, true);

这段代码显示url_parts是

{
  "protocol":null,
  "slashes":null,
  "auth":null,
  "host":null,
  "port":null,
  "hostname":null,
  "hash":null,
  "search":"",
  "query":{},
  "pathname":"/aaa",
  "path":"/aaa",
  "href":"/aaa"
}

所以没有正确选择匹配#hash。 所以在你的情况下你应该在url中添加一个真实的路径然后匹配它，比如http://127.0.0.1:3000/homepage/#/login

Answer 3

我的方法是通过启用 HTML 5 模式来删除 /#。

来自Docs

在你的路由器文件中，你可以这样做：

app.config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) {

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: true
    });

    $stateProvider
    .state
    ...

});

index.html

<base href="/">

现在您可以在没有/# 的情况下访问您的路径，并且无需更改服务器端。