Laravel 默认使用 Vuejs 进行身份验证，仅在登录后提供 spa

Posted 2023-02-22

【中文标题】Laravel 默认使用 Vuejs 进行身份验证，仅在登录后提供 spa

【英文标题】：Laravel default authentication with Vuejs, serve spa only after login

【发布时间】：2020-11-20 17:07:42

【问题描述】：

我正在使用默认的 Laravel 脚手架进行 SPA：

// Generate basic scaffolding...
php artisan ui vue

// Generate login / registration scaffolding...
php artisan ui vue --auth

这为我们提供了一个使用 Laravel 和 Vuejs 的良好起点。它按预期工作，除了我想提供 SPA，所以 .js 文件，只有在用户登录后。这还需要从公共文件夹中删除 javascript 文件，否则人们仍然可以访问内容（当然不是数据，因为受保护的路由，它只为登录用户加载）。

所以我想做的是以与访问身份验证路由后面的数据库数据相同的方式保护资源。这还不够，因为我还需要将创建的由 vue 文件组成的 js 文件移出公共文件夹。如果我没记错的话，这发生在 webpack 中？

最好的问候 普桑特

【参考方案1】：

我不知道你的问题与你解释的问题有什么关系，但我会解释一下。

隐藏 JS 文件或任何文件是不可能的，因为无论人们如何总是可以抓取您的页面并找到它，这毕竟是 Front-End 问题，有一些想法，例如 @ 987654322@ 在他们的其中一个项目中将资源放入 html 文件中，然后尝试在主文件中使用 HTML 标记导入它，因此，当有人想要访问 CSS 元素或 JS 文件时，所有这些都是 @ 987654323@ 在 HTML 文件中，但没有提及如何。我不是说你可以这样做，但这是人们尝试做的想法之一，但在一些更新之后，他们将其删除。这属于我的一门课程，我们试图在 HTML 文件中解释所有类型的包含资源。

因此，无论您做什么，人们都可以找到并阅读您的内容，甚至 Minify JS 和 CSS 也可以轻松取消缩小并变得可读。

现在关于您的问题，Laravel 默认身份验证，我可能会说有很多方法，Laravel/Vue 没有默认方法，Laravel 有默认方法，人们使用它就是这样。 Passport、Sanctum 或 JWT 是大多数人依赖它的流行方式，我建议搜索他们对工作方式的主要想法，然后选择其中一种。对于 spa 的人大多选择 JWT，ofc 你可以使用其他，只需简单地将 auth()->user() 传递给你的刀片，但毕竟这真的取决于你在 spa 中要做的事情，你想如何维护你的基本保护应用程序的想法等等......

祝你好运。

【讨论】：

为什么不能隐藏js文件？是否可以显示一个 html php 登录名，然后访问拥有水疗中心的路线？

@Pouissante javascript 文件被视为静态资产，就像您的图像、字体、css 文件一样。它们不应包含机密信息。

@DavidHeremans 好消息，我已经读到在编写我的 vue 组件之前它不应该包含机密信息。如果有意义的话，我只是不希望人们实际上废弃我的设计。我应该提到它并不适合广大公众，只有 4-5 个用户。

@DavidHeremans 仍然必须可以通过 Internet 访问，并且 LAN 中没有服务器可以私人托管

您仍然可以使用 VPC 做到这一点吗？

【参考方案2】：

为了满足您的需求，您应该有一个登录页面，您的用户可以在其中输入他们的凭据。到目前为止，您还没有授予对其余文件的任何访问权限。当用户登录时，应调用另一个操作以便从用户那里检索您的SPA application。

无论如何，我强烈建议不要在您的Front-end js code 中包含任何主要业务逻辑，因为业务逻辑应在服务器端计算，以免公开可用。

编辑：要回答您的评论，您无需为此配置 webpack。您可以简单地拥有一个控制器/操作，它返回登录页面的文件ONLY，另一个处理用户登录凭据的操作，如果用户已被授予访问权限，那么只有您发送您的@ 987654323@ 文件供您的用户查看。

【讨论】：

我同意，我的问题是关于你所描述的。我不知道如何使用 webpack 来改变它的行为，所以它不会将我的 js 文件放在公共文件夹中，而是在登录后提供它们。虽然我猜后面的部分应该在 laravel 的控制器中完成。

【参考方案3】：

您可以通过 PHP 文件轻松包装您不希望公开提供的 JS 文件，并且这些 JS 文件不应位于任何公共文件夹中。..

因此将文件移出 ./public/ 并移至与 public 相同级别的另一个文件夹，

然后让 Laravel 提供一个特定的 Controller -> 路由，它只会在 PHP 检查登录用户的凭据时输出您的 hidden JS。

【参考方案4】：

我假设你想将你的构建文件输出到storage/app/build

更新您的webpack.mix.js

 const fs = require('fs');
 const path = require('path');
 const mix = require('laravel-mix');

 const publicPath = 'storage/app/build';

 mix.setPublicPath(publicPath)
   .js('resources/js/app.js', 'js')
   .sass('resources/sass/app.scss', 'css');

 if (mix.inProduction()) 
   mix.version();
 

 mix.then(function () 
   const src = path.resolve(__dirname, `$publicPath/mix-manifest.json`);
   const dest = path.resolve(__dirname, 'public/mix-manifest.json');

   fs.copyFileSync(src, dest);
   fs.unlinkSync(src);
 );

将此路由添加到routes/web.php

 Route::get('/path', function (string $path) 
     try 
         return response()->file(storage_path('app/build/'.$path));
      catch (\Symfony\Component\HttpFoundation\File\Exception\FileNotFoundException $e) 
         abort(404);
     
 )
   ->where('path', '^(js|css)/.*\.(js|css)$')
   ->middleware('auth');