阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

将数据从 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 捆绑在一起,同时仍可以直接向其中注入数据

将属性作为全局窗口注入

相反,您需要使用返回值的计算方法:

// 会起作用<template>    <div v-if="showSecretWindow">        <h1>这是个秘密窗口,别告诉任何人!</h1>    </div></template><script>    export default {        computed: {            showSecretWindow() {                return window.showSecretWindow;            }        }    }</script>

如果这个方法的用例是较小的字符串或数值,并且使用 Laravel自身的 mix 来编译,那么事情实际上会变得非常简单
您可以使用 process.env 对象引用 JavaScript 中 .env 文件中的值
例如,如果我的环境变量文件中有 API_DOMAIN=example.com,我可以在我的 Vue 组件(或使用 mix 编译的其他 JavaScript )中使用process.env.API_DOMAIN

将 API 与 Laravel 自身的 web 中间件和 CSRF 令牌一起使用

赞成: 最安全和解耦的选项反对: 需要安装以及配置第三方程序包

JSON Web Tokens 是安全的,易于使用的方法来锁定对API 端点的访问,并使用了 Tymon’s jwt-auth 扩展包,在这个基础上,用来构建新的项目或者在现有的 Laravel 应用中使用绝对是一件简单的事情

要在 API 上安装和配置此功能,只需要几个简单的步骤:

在你的应用根目录运行  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 以生成签名应用程序令牌所需要的密钥

完成之后,你需要决定哪些路由将受 JWT 保护并针对 JWT 进行身份验证
你可以使用内置的 api auth 中间件来执行此操作,或者也可以自己滚动在发送请求的过程中获取令牌
在 API 的登录方法中,你将使用相同的 auth()->attempt 方法作为默认的Laravel应用程序,但从它返回的除外是你应该传递回的 JSON Web Token 令牌

从那里,你的 Vue 应用程序应该存储该令牌(存储在 LocalStorage 或者 Vuex),在每一个传出请求中,都将它加入到 Authorization header 作为授权头
回到你的 Laravel 应用,你可以使用他们的令牌来引用特定用户的请求
将应该显示给他们的数据返回回去

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!