将数据从 Laravel 传送到 vue 的四种方式
欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1017/120452.html
文章转发自专业的Laravel开发者社区,原始链接:https://learnku.com/laravel/t...
在过去的两三年里,我一直在研究同时使用 Vue 和 Laravel 的项目,在每个项目开发的开始阶段,我必须问自己 “我将如何将数据从 Laravel 传递到 Vue ?”
这适用于 Vue 前端组件与Blade模板紧密耦合的两个应用程序,以及运行完全独立于 Laravel 后端的单页应用程序
这里有四种不同的方法从一个到另一个获取数据
直接回显到数据对象或组件属性中
对于 Laravel 5.5+ 使用 json 指令:
使用自定义组件和 Laravel 自身的 json
blade指令可以让您轻松地将数据移动到道具中
此方法允许您划分 Vue 代码,将脚本与 Webpack 或 Mix 捆绑在一起,同时仍可以直接向其中注入数据
将属性作为全局窗口注入
相反,您需要使用返回值的计算方法: 如果这个方法的用例是较小的字符串或数值,并且使用 Laravel自身的 mix 来编译,那么事情实际上会变得非常简单 赞成: 最安全和解耦的选项反对: 需要安装以及配置第三方程序包 JSON Web Tokens 是安全的,易于使用的方法来锁定对API 端点的访问,并使用了 Tymon’s jwt-auth 扩展包,在这个基础上,用来构建新的项目或者在现有的 Laravel 应用中使用绝对是一件简单的事情 要在 API 上安装和配置此功能,只需要几个简单的步骤: 完成之后,你需要决定哪些路由将受 JWT 保护并针对 JWT 进行身份验证 从那里,你的 Vue 应用程序应该存储该令牌(存储在 LocalStorage 或者 Vuex),在每一个传出请求中,都将它加入到 Authorization header 作为授权头// 会起作用<template> <div v-if="showSecretWindow"> <h1>这是个秘密窗口,别告诉任何人!</h1> </div></template><script> export default { computed: { showSecretWindow() { return window.showSecretWindow; } } }</script>
您可以使用 process.env 对象引用 JavaScript 中 .env
文件中的值
例如,如果我的环境变量文件中有 API_DOMAIN=example.com
,我可以在我的 Vue 组件(或使用 mix 编译的其他 JavaScript )中使用process.env.API_DOMAIN
将 API 与 Laravel 自身的 web 中间件和 CSRF 令牌一起使用
composer require tymon/jwt-auth
在写这篇文章的时候正处于过渡时期,因此你可能需要指定版本(例如 1.0.0-rc.5)
如果你使用的是 Laravel5.4 及更低的版本,将该行 Tymon\JWTAuth\Providers\LaravelServiceProvider::class,
加入 config/app.php 的 providers 数组当中
通过运行 php artisan vendor:publish
来选择 jwt-auth 软件包发布配置文件
运行 php artisan jwt:secret
以生成签名应用程序令牌所需要的密钥
你可以使用内置的 api auth 中间件来执行此操作,或者也可以自己滚动在发送请求的过程中获取令牌
在 API 的登录方法中,你将使用相同的 auth()->attempt
方法作为默认的Laravel应用程序,但从它返回的除外是你应该传递回的 JSON Web Token 令牌
回到你的 Laravel 应用,你可以使用他们的令牌来引用特定用户的请求
将应该显示给他们的数据返回回去