Angular 7未登录时如何隐藏LoggedComponent代码不被Chrome审查？

首先得明确为什么你现在的方式行不通：*ngIf='logged'只是在DOM层面不渲染LoggedComponent，但Angular构建打包时，会把所有被引用到的组件都打包进main.js（或其他主chunk文件）里——不管你有没有用*ngIf控制显示。所以哪怕用户没登录，这些组件的代码已经在下载的包中了，自然能在Chrome的Source面板里找到。

路由懒加载是非常可行的解决方案 #

Angular的模块懒加载就是专门用来解决这种「按需加载代码」场景的。核心思路是把登录后才能访问的组件单独放到一个独立模块中，只有当用户登录并导航到对应路由时，才会下载这个模块的代码chunk，未登录时根本不会加载这块代码，也就不存在被查看的问题了。

具体操作步骤大概是这样：

1. 创建懒加载模块：把LoggedComponent和相关服务、模板抽离到独立模块（比如LoggedModule），记得在这个模块里配置好内部路由（比如默认路由指向LoggedComponent）。
2. 配置根路由：在根路由模块中，添加指向这个懒加载模块的路由项，使用loadChildren语法：

   const routes: Routes = [
     { path: '', component: HomeComponent },
     // 仅当访问/logged路径时，才会加载LoggedModule对应的chunk
     { 
       path: 'logged', 
       loadChildren: () => import('./logged/logged.module').then(m => m.LoggedModule),
       // 可添加路由守卫，确保仅登录用户能访问该路由
       canActivate: [AuthGuard]
     }
   ];
   

3. 添加路由守卫：编写AuthGuard实现CanActivate接口，在其中检查用户登录状态，若未登录则重定向到首页或登录页，防止用户直接通过URL访问受保护路由。
4. 登录后导航：用户登录成功后，调用router.navigate(['/logged'])跳转到受保护路由，此时浏览器才会下载LoggedModule对应的chunk文件，组件代码才会出现在Source面板中。

有没有不用路由的替代方案？ #

也有，但远不如路由懒加载简洁可靠：比如用ComponentFactoryResolver动态加载组件，但你需要手动管理组件加载时机、容器，还要处理模块导入问题，复杂度高很多，不推荐使用。

重要提醒 #

不管用哪种前端方式隐藏代码，后端的权限验证永远是第一位的。前端控制只是防止普通用户误操作或查看代码，但懂技术的人可以绕过前端限制直接请求API。所以你的后端接口必须验证用户的OAuth token有效性，确保未登录用户无法访问敏感数据。

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