【发布时间】:2019-12-17 19:30:45
【问题描述】:
我有一个只有 3 个表的简单项目。 users、table2 和 table3。
用户架构
Schema::create('users', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('username')->unique();
$table->string('password');
$table->string('api_token')->unique();
$table->rememberToken();
$table->timestamps();
});
其他 2 个表可通过 API 资源访问。
这是我的路线:
routes/web.php
Route::get('/', 'Auth\LoginController@showLogin')->name('login');
Route::post('/login', 'Auth\LoginController@login');
Route::get('/logout', 'Auth\LoginController@logout')->name('logout');
//Authenticated users will be redirected here
Route::get('/home', 'HomeController@index')->name('home');
routes/api.php
Route::resource('/table1', 'Table1Controller');
Route::resource('/table2', 'Table2Controller');
我在Table1Controller 和Table2Controller 中添加了auth:api 中间件。
public function __construct()
{
$this->middleware('auth:api');
}
所以确切地说,我只有 2 页。认证用户进入的主页面和登录页面。
添加用户时,它还会将随机字符串api_token 保存到其所在行。
我正在使用 VueJS,我不想弄得一团糟,而是将 Node 与这个一起使用。所以我下载了vue.min.js 并将其包含在我的blade 文件中。
所以当您登录时,您将被重定向到/home 页面。我的页面的布局页面有这个:
<script src="{{ asset('js/vue.min.js') }}"></script>
<script src="{{ asset('js/axios.min.js') }}"></script>
<script>
const user = @json(Auth::user());
const http = axios.create({
baseURL: '/api',
headers: {
'Authorization': user ? 'Bearer ' + user.api_token : ''
}
});
</script>
通过上面的代码,您应该可以在发送请求时访问 table1 和 table2 api。
现在我知道我可以使用 webpack 并将我的应用程序设为 SPA 并使用护照或 jwt。但我不想要,因为它是一个非常简单的应用程序,我想在不刷新页面的情况下执行操作,例如在表格中添加数据、编辑数据并以模式显示等。
顺便说一句,这个应用程序只能由同一个应用程序使用。没有其他服务可以访问它。我只想使用 Vue 来实现反应性并避免整个页面重新加载。
有没有我想念的更好的方法?
【问题讨论】:
标签: javascript php laravel vue.js laravel-5