使用$routeProvider的AngularJS路由刷新报错及登录路由外实践咨询

一、刷新页面出现「Cannot GET /home」的原因与解决方法 #

这个问题本质是前端路由和服务器路由的冲突：AngularJS的$routeProvider是前端路由，当你在/home页面刷新时，浏览器会直接向服务器请求/home这个路径，但你的服务器并没有配置对应的静态资源或路由来响应这个请求，所以返回404错误。

解决思路分两种情况： #

• 情况1：你没有开启HTML5模式
  默认情况下AngularJS用的是hash模式路由（比如/#/home），这种模式下刷新不会触发服务器请求，因为浏览器只会请求根路径的index.html，然后由AngularJS解析hash值来加载对应路由。如果你现在出现了这个问题，先检查代码里有没有误开启HTML5模式：

  // 如果你写了这段代码，就是开启了HTML5模式
  $locationProvider.html5Mode(true);
  

  如果不需要HTML5模式，直接删掉这段代码，路由会自动回到hash模式，刷新问题就解决了。

• 情况2：你需要保留HTML5模式（不带#的路由）
  这种情况下必须配置服务器，让所有非静态资源的请求都重定向到index.html，由AngularJS来处理路由。举几个常见服务器的配置示例：

  • Nginx：在你的server配置里添加：

    location / {
        try_files $uri $uri/ /index.html;
    }
    

  • Apache：创建.htaccess文件放在项目根目录：

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
    

  • Node.js Express：添加中间件：

    const express = require('express');
    const app = express();
    app.use(express.static(__dirname + '/public'));
    // 所有请求重定向到index.html
    app.get('*', (req, res) => {
        res.sendFile(__dirname + '/public/index.html');
    });
    

二、将登录页置于路由体系之外的最佳实践 #

把登录页放在路由体系外，核心是让登录流程独立于AngularJS的路由系统，通常有两种常用方案：

方案1：登录页作为独立静态页面 #

• 把登录页做成单独的login.html（不是通过templateUrl加载的视图），放在项目根目录或静态资源文件夹里。
• 用户访问网站时，默认先加载login.html，登录成功后，通过window.location.href跳转到AngularJS的主应用入口index.html，然后自动进入/home路由。
• 这种方案的好处是：未登录时不会加载AngularJS的整个应用代码，减少初始加载体积；登录流程完全独立，避免路由守卫的复杂逻辑。

方案2：同一入口页内隔离登录区域 #

• 如果不想分开两个页面，可以在index.html里同时包含登录表单和AngularJS应用的根容器，用ng-if或ng-show根据登录状态切换显示：

  <!-- 登录区域 -->
  <div ng-if="!isLoggedIn">
      <form ng-submit="login()">
          <!-- 登录表单内容 -->
      </form>
  </div>
  <!-- AngularJS路由视图容器 -->
  <div ng-if="isLoggedIn" ng-view></div>
  

• 这种情况下，登录逻辑写在全局控制器或服务里，不需要通过$routeProvider配置登录路由，只有用户登录后才会渲染路由视图。

额外注意点 #

• 不管用哪种方案，都要在AngularJS的路由里添加登录守卫：通过resolve属性检查用户是否已登录，未登录的话跳转到登录页（方案1）或显示登录区域（方案2）：

  .when("/home", {
      templateUrl: "views/home/home_template.html",
      controller: "HomeController as homeCtrl",
      resolve: {
          checkLogin: function(AuthService, $location) {
              if (!AuthService.isLoggedIn()) {
                  $location.path('/'); // 或者直接跳转到login.html
              }
          }
      }
  })
  

内容的提问来源于stack exchange，提问作者prasad