Angular UI 路由器和 Express 路由器答案

【问题标题】：Angular UI Router and Express RouterAngular UI 路由器和 Express 路由器
【发布时间】：2016-11-03 17:36:00
【问题描述】：

我正在尝试实现登录功能，并且使用 Express Router 成功/失败后有一个重定向：

router.post('/login',
  passport.authenticate('local', {successRedirect:'/dashboard', failureRedirect:'/login',failureFlash: true}),
  function(req, res) {
    res.redirect('/');
  });

成功登录后，我得到Cannot GET /dashboard 或在失败的情况下Cannot GET /login。服务器（Express）和客户端（Angular UI Router）上的路由之间是否存在一些不兼容？我应该只使用其中一个路由器吗？

这是 UI Router 的代码：

angular
  .module('app', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngResource',
    'ngTouch'
  ])
  .config( function ($stateProvider, $urlRouterProvider, $locationProvider){
    $stateProvider
      .state('login', {
        url: '/login',
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl'
      })
      .state('home', {
        url: '',
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
      })
      .state('home.dashboard', {
        abstract: true,
        url: '/dashboard',
        templateUrl: 'views/dashboard.html'
      });

    // For any unmatched url, send to /
    $urlRouterProvider.otherwise('/');
    $mdGestureProvider.skipClickHijack();
    //remove the hashtag from URL
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
  });

【问题讨论】：

标签： angularjs express angular-ui-router passport.js

【解决方案1】：

您的快速路由器没问题。这是一个规范的表单提交，页面将正确重定向。

但由于 Angular 应用程序通过 ajax 发出请求，因此应用程序不知道这些重定向，因此不会执行任何操作。

让您的仪表板或登录控制器评估登录状态，然后从那里重定向。

【讨论】：

有通过<form class="form" method="POST" action="/users/login"> <div> <label>Username</label> <input name="username" ng-model="loginForm.username"> <label>Password</label> <input name="password" ng-model="loginForm.password" type="password"> </div> <div> <button type="submit">Login</button> </div> </form> 形式的直接请求所以你建议我在客户端控制器上创建将使用Angular Router ($state.go('home.dashboard');) 处理重定向的逻辑？
是的，应该会

【解决方案2】：

你写的当前代码没有重定向到前端，它生成一个新的GET请求，你需要处理生成的GET请求。

你的情况

    router.get('/dashboard',function(req,res){
           res.redirect("full path of the url which you use in browser")
    });

或者试试这个

{successRedirect:'http://your front end domain/dashboard', failureRedirect:'http://your front end domain/login',failureFlash: true}

【讨论】：

我尝试了两种解决方案，仍然是Cannot GET /dashboard。嗯，看来问题出在 angular ui 路由器上：/
登录后，浏览器中的url有变化吗？
ok.. 如果浏览器地址框中的 url 发生变化，请按 f12 并在开发者控制台中查找任何错误
angular.js:12011 GET http://192.168.1.65:3000/dashboard 404 (Not Found)
是你的服务器端有 express.static app.use(express.static(__dirname + '/public'));