Bluehost托管WordPress站点子目录Angular应用如何限制仅注册用户访问

下面提供两种可直接落地的方案，均不需要你重新开发用户管理体系，也不需要改动现有Angular应用代码：

方案1：对接WordPress现有用户体系（推荐） #

该方案可以直接复用站点已有的WordPress注册用户账号，不需要用户额外记新密码：

• 首先在WordPress站点根目录新建auth-check.php文件，写入以下内容：

<?php
// 加载WordPress核心能力
require_once dirname(__FILE__) . '/wp-load.php';

// 校验用户是否已登录WordPress
if (!is_user_logged_in()) {
    // 未登录用户跳转到站点登录页，登录成功后自动回到当前访问的Angular页面
    wp_redirect(wp_login_url($_SERVER['REQUEST_URI']));
    exit;
}

• 进入你存放Angular应用的子文件夹，新建.htaccess文件，写入以下配置：

RewriteEngine On
# 所有访问当前目录的请求先经过WordPress登录校验
RewriteCond %{REQUEST_FILENAME} !auth-check.php
RewriteRule ^(.*)$ /auth-check.php [L]

# 如果你用的是Angular history路由模式，保留以下配置，hash模式可删除
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /替换为你的Angular应用子目录名/index.html [L]

方案2：用Bluehost cPanel自带目录加密（操作最简单） #

该方案不需要写任何代码，几分钟即可配置完成，只是账号需要单独维护：

• 登录Bluehost cPanel管理后台，找到「文件」分类下的「目录隐私」功能
• 选中你存放Angular应用的子文件夹，开启密码保护，按需创建允许访问的账号密码，分发给内部用户即可

补充说明 #

两种方案均属于服务端访问控制，不会对你已开发完成的Angular应用功能产生任何影响。

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