Angularjs 使用Angular ui路由器使用Express重定向

如果我转到

http://localhost:3000

要启动我的项目，但我尚未登录，它将转到

http://localhost:3000/login

，但我希望它转到

http://localhost:3000/#/login

。有没有办法做到这一点，除非我在角度前端重定向？还是我做错了

如果我可以在express中的后端执行此操作，那将是理想的

我的角路由文件

$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');
});

我的快速路由文件

$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');
});

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

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

并将isLoggedIn函数更改为：

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

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

编辑2：

对不起，我不知道我是否明白你想说什么？比如现在。。如果没有

isLoggedIn

check，它将自动转到仪表板，url为

http://localhost:3000/#/app/dashboard

我相信是由于这一行代码的缘故：

$urlRouterProvider。否则（'/app/dashboard'）

但是我在特快专车上没有专门的

/app/dashboard

路线。我的仪表板布线已经正常工作，如下所示：

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

在您的

路由器.get（）

中，您正在匹配

'/'

。 isLoggedIn将响应重定向到

/#/login

，它也匹配相同的

'/'

，然后您会得到一个圆圈

res.redirect（'/login'）的原因

works是指您有一个处理'/login'的路由器，它阻止路由器链转到

router.get（'/'，isLoggedIn，fn）

因此，您需要添加一个新的路由器规则来处理

/#/login

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

已更新

---

经过研究我发现

我通过访问

http://127.0.0.1:3000/aaa#/login

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

此代码显示要删除的

url\u部分

{
  "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

在您的

路由器.get（）

中，您正在匹配

'/'

。

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

isLoggedIn将响应重定向到

/#/login

，它也匹配相同的

'/'

，然后您会得到一个圆圈

res.redirect（'/login'）的原因

works是指您有一个处理'/login'的路由器，它阻止路由器链转到

router.get（'/'，isLoggedIn，fn）

因此，您需要添加一个新的路由器规则来处理

/#/login

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

已更新

---

经过研究我发现

我通过访问

http://127.0.0.1:3000/aaa#/login

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

此代码显示要删除的

url\u部分

{
  "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

假设您的主要路线是

/

，它呈现main

索引（html/ejs）

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

现在，AngularUI路由器有3条路由，如

/abc
/xyz
/abc/xyz

因此，您需要在express中创建4条路由，以呈现

索引（html/ejs）

或 如果您的ui路由器包含

app

或其他通用名称作为路径

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

---

然后在express router或middleware中检查URL的正则表达式，如果它包含

app

，则呈现

index.（html/ejs）

假设您的主路由是

/

，它呈现main

index.（html/ejs）

现在，AngularUI路由器有3条路由，如

/abc
/xyz
/abc/xyz

因此，您需要在express中创建4条路由，以呈现

索引（html/ejs）

或 如果您的ui路由器包含

app

或其他通用名称作为路径

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

---

然后在express router或middleware中检查URL的正则表达式，如果它包含

app

，则呈现

index.（html/ejs）

我的方法是通过启用html 5模式来删除

/#

从

在路由器文件中，您可以执行以下操作：

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

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

    $stateProvider
    .state
    ...

});

index.html

<base href="/">

---

现在，您无需更改服务器端即可访问路径。

我的方法是通过启用HTML5模式删除路径

从

在路由器文件中，您可以执行以下操作：

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

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

    $stateProvider
    .state
    ...

});

index.html

<base href="/">

---

现在，您无需更改服务器端即可访问路径。

抱歉，我无法理解您的评论。请你再解释一下好吗？我根据你的回答编辑了原始帖子，但我无法让它发挥作用。我在原始帖子中编辑的内容是你想让我做的吗？@user1189352我更新了我的帖子，请检查。现在我认为标准是使用路径名，而不是在

window.location

中散列来跟踪路由器。关于hash的更多信息请参见抱歉刚刚关机笔记本电脑将于明天上班时检查。谢谢你的帮助。对不起，我听不懂你的评论。请你再解释一下好吗？我根据你的回答编辑了原始帖子，但我无法让它发挥作用。我在原始帖子中编辑的内容是你想让我做的吗？@user1189352我更新了我的帖子，请检查。现在我认为标准是使用路径名，而不是在

window.location

中散列来跟踪路由器。关于hash的更多信息请参见抱歉刚刚关机笔记本电脑将于明天上班时检查。谢谢你的帮助为你做了一个“编辑2”。仍然不确定我应该做些什么才能让它生效如果你是用户html5 push state true（如ex），如果你使用的是

#

，那么只需使用

/

创建一条路由并加载

index.html

，一旦加载

/#/app/dashboard

将通过角度ajaxi进行渲染，很抱歉，我仍然不知道如何修复