Laravel Passport在Vue/Axios API调用中突然返回401 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Laravel Vue 前后端分离使用token认证

前台在向后台发起请求时要携带一个token 后台需要做一个返回当前登录用户的信息的api，地址是 /api/user 先添加路由，当给 route/api.php 添加 Route::middleware...://mydomain.com/api/user 会返回 401 Unauthorized 原因是在config/auth.php中有下面的关键配置 'guards' => [...访问走的是token认证，这里没有提供token所以就认证失败返回401了。...为了安全，可以实现下面的功能：每次登录成功后刷新api_token为新值其实 Laravel 官方提供了一个 Laravel Passport 的包。...Laravel Passport is an OAuth2 server and API authentication package 。具体使用请等更新。

5.1K2 0

JDL-GateWay物流网络SDK的设计与使用

axiosGW是基于axios实现的网关前端SDK插件，目前支持passport、erp 、inner_erp（内网ERP调用网关）、 tls_inner_erp（tls内网ERP调用网关）。...2.在响应拦截器中，进行401的跳转判断处理。 3.考虑的插件的灵活性允许第三方配置服务域或者跳转地址。 ?...目前支持passport、erp 、inner_erp（内网ERP调用网关）、 tls_inner_erp（tls内网ERP调用网关）。...自定义登录跳转默认status返回401时，检查为用户未登录，会触发登录跳转。如果你想自定义登录跳转的地址时，有两种方案可选。...自定义响应处理如果您的response的返回结果并非 401表示未登录这样的模板结果，您可以通过responseHandle回调方法进行自定义响应处理。规范返回的结果中需包含status字段。

1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡

下面我将详细阐述其原理、技术方案，并分别给出前端（uni-app + Vue3）和后端（PHP + Laravel）的具体实现步骤。...三、后端开发（PHP + Laravel）要做的内容我们假设使用 Laravel Sanctum（API 令牌认证）或 Laravel Passport（OAuth2 服务器）来实现。...App 初始化（App.vue 或 main.js）在应用启动时，检查是否存在令牌，并尝试获取用户信息，以验证令牌是否有效。...登录页面在登录页面，当用户成功登录并选择“记住我”后，保存返回的所有令牌。...前端：负责安全地存储令牌，在每次请求时自动携带，并在收到 401 错误时自动尝试刷新令牌，实现无感登录。同时，在 App 启动时自动恢复登录状态。

2661 0

Laravel 的优雅之处之，Passport搭建SSO系统

下面是一些大致的步骤：首先，在 Laravel 项目中安装 Laravel Passport 包，并按照官方文档进行配置。接着，需要创建一个专门用于授权的 Passport 客户端。...在 Laravel 中，可以使用 php artisan passport:client 命令来创建一个客户端。...我们需要在此方法中添加以下代码：\Illuminate\Support\Facades\Auth::viaRequest('api', function ($request) { return \...可以使用 Laravel 自带的 AuthController 类来处理此请求。在此控制器中，我们需要使用 Passport 提供的 issueToken 方法来颁发访问令牌。...当用户在一个应用程序中进行身份验证时，该系统将颁发一个访问令牌，并将其传递到其他应用程序中，使用户能够在这些应用程序中保持登录状态。

2.4K5 0

通过 Laravel 创建一个 Vue 单页面应用（二）

在这个教程中，我们通过学习怎样从 Vue 组件中的 Laravel API 加载异步数据，来继续在 Laravel 中创建一个 Vue 单页应用（SPA）。...我们也会看看相关的错误处理，比如当 API 返回错误，接口如何响应。如果你没有学习第一部分，我们通过 Vue Router 和 Laravel 后端组建的 Vue 单页应用（SPA）。...保持服务端数据简单，我们的 API 将返回假数据。在第三部分，我们将让 API 通过控制器从数据库中返回测试数据。...API 路由 Vue 单页应用是无状态的，这就要求我们发起 API 请求到 Laravel 路由的时候，需要通过定义在 routes/api.php 中的路由。...如果你刷新页面几次，你可能会看到“加载中…”，如果你检查开发者工具，你会发现一个没有捕获的来之 Axios 请求的错误：我们可以处理这个失败的请求通过在 Axios prpmise 上链式调用 catch

4.3K3 0

laravel + passport的Aouth2.0全解

一图讲解：五、Aouth2.0的密码模式：网上多的是：参考[不错的资源](https://www.pilishen.com/posts/laravel-5-how-to-create-api-authentication-using-passport-example...二、心得&重点： 1、完全理解透彻的一次使用 1、一定要把Aouth2.0和laravel自带的API区分开。...2、把api认证和web认证区分开 2、 oauth_clients表的Laravel Password Grant Client和Laravel Personal Access Client的区别...1.3 laravel的自带web登录、passport的登录、vue的首页都会占用自动跳转默认页面,这些还需要好好研究。...1.1.2 php artisan passport:client命令：这个命令只在oauth_clients中生成一行带user_id的，其他表没有任何反应。

5K3 0

node与浏览器中的cookie

前言记录一下自己在 nodejs 中使用 http 请求库 axios 中的一些坑（针对 Cookie 操作）不敢说和别人封装的 axios 相比有多好，但绝对是你能收获到 axios 的一些知识...，话不多说，开始封装一般而言，很少有裸装使用 axios 的，就我涉及的项目来说，我都会将 axios 的 request 封装成一个函数使用，接着在 api 目录下，引用该文件。...也是我为啥标题只写 axios，而不写 vue-axios 或者 axios 封装的原因。...这个协议头，实际上 axios 就没必要，因为浏览器会自行帮你获取服务器返回的 Cookies，并将其写入在 Storage 里的 Cookies 中，再下次请求的时候根据同源策略携带上对应的 Cookie...要获取也很简单，vue 中通过js-cookie模块即可，而在 electron 中通过const { session } = require('electron').remote （electron

2.4K3 0

web3服务端身份验证

这里的问题是，任何人都可以用别人的地址向我们发送 API 请求，并且我们无法验证这个地址是否映射到与前端的钱包。在服务端验证签名容易忽略的一点，本质上加密钱包只是一个密钥对（私钥和公钥的组合）。...我们首先需要在服务端生成 nonce ,并将其存储在会话中(因为之后需要它来验证签名)： import crypto from 'crypto' export default async function...('/api/auth/nonce').then(res => res.data) await axios.post('/api/auth/login', { address: await web3...我建议在 Node 上用passport-web3[5]，如果你正在用 PHP 和 Laravel ，我建议用 and laravel-web3-login[6]。...-login/blob/ [5] passport-web3: https://github.com/coopermaruyama/passport-web3 [6] laravel-web3-login

3.1K1 0

通过 Laravel 创建一个 Vue 单页面应用（三）

我们将通过演示在 vue-router 进入一个路由之前，如何异步加载数据来继续使用 Laravel 构建我们的 Vue SPA。...之前在通过 Laravel 创建一个 Vue 单页应用（二）中完成了 UsersIndex 组件异步地从 API 中加载用户。...简化了从数据库构建一个真实的后端 API，选择通过 Laravel 的 factory() 方法在 API 返回中模拟假数据。...创建一个真正的用户端点我们将创建一个 UsersController 使用 Laravel 5.5 新的 API 资源来返回 JSON 数据。...返回数据后的 getUsers() 调用中的 callback 参数： (err, data) => { next(vm => vm.setData(err, data)); } 然后在API成功响应时

7.1K1 0

vue + quill富文本编辑器实现自定义图片上传功能

前言好久没更新博客了，主要最近一直在忙，一是工作比较多，二是在忙着写自己的‘墨客’项目。...该项目前后端分离，后端使用laravel5.5 + passport提供接口，前端使用vue2.5 + axios + vuex。.../plugins/editor/vue-quill-editor' export default { name: 'Index', data () {...之后的逻辑是首先：调用imageHandler方法，进行初始化与文件验证；接着调用saveImage，请求接口，我的接口返回完整的图片链接；最后是使用quill的api进行插入。 OJBK!

2K2 0

构建Vue项目-身份验证

在main.js文件中，导入相关服务模块之后，然后执行以下几行： // 设置API base URL ApiService.init(process.env.VUE_APP_ROOT_API) //...在某些情况下，最好是在发生401错误时简单地注销用户，但是让我们看看如何在不中断用户体验的情况下刷新访问令牌。这是上面提到的代码示例中的401拦截器。...// 注销401拦截器 axios.interceptors.response.eject(this._401interceptor) } } 上面的代码要做的是拦截每个API...如果是，则我们正在检查401是否在令牌刷新调用本身上发生（我们不想陷入循环中）永久刷新令牌！）。然后，代码将刷新令牌并重试失败的请求，并将响应返回给调用方。...通过保存刷新令牌promise，并向每个刷新令牌请求返回相同的promise，我们可以确保令牌仅刷新一次。您还需要在设置请求header之后立即在main.js中安装401拦截器。

8.5K2 0

axios封装token示例

在其他模块中，可以像使用原始的 Axios 一样使用该实例，不必在每个请求中都手动添加 Token。例如： import axios from '....200 的响应，会将错误信息以 Promise.reject 的形式返回，便于在调用处处理错误；对于 401 错误（未授权），会自动跳转到登录页面。.../router'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, timeout: 10000...我们使用了环境变量 VUE_APP_API_BASE_URL 和 VUE_APP_APP_ID 分别存储了 API 的基础 URL 和应用程序的 ID，以便在请求拦截器中使用。...在响应拦截器中，我们判断了 HTTP 状态码非 200 的响应，并将错误信息以 Promise.reject 的形式返回。对于 401 错误，我们自动跳转到登录页面。

1.6K1 0

Nuxt + Koa2 + Mongodb 手撸一个网上商城

// 在页面中设置layout export default { layout: 'blank' //默认是default } // 在layout中 ...在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。...（渲染）组件（页面组件，即pages文件夹下的文件，不包含components下的）之前在服务端或路由更新之前被调用，即可以进行异步获取数据并返回当前组件。...–简而言之就是fetch 和 asyncData 在组件上不能用。 Vuex ⚠️在nuxt中，vuex需要导出一个方法。...mongoose 获取内嵌数组的长度，有没有更好的办法，或者说是既能返回总数也能进行分页？订单是在数据中库存了的，没有展示，收货地址也只有增加。这两处都可以扩展增删改查的功能。

9.6K1 0

Nuxt + Koa2 + Mongodb 手撸一个网上商城

// 在页面中设置layout export default { layout: 'blank' //默认是default } // 在layout中 ... // 这个是必须定义的，就像是vue的router-view 全局过滤器 Nuxt的全局过滤器，定义在plugins下面，在nuxt.config.js...在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。...（渲染）组件（页面组件，即pages文件夹下的文件，不包含components下的）之前在服务端或路由更新之前被调用，即可以进行异步获取数据并返回当前组件。...--简而言之就是fetch 和 asyncData 在组件上不能用。 Vuex ⚠️在nuxt中，vuex需要导出一个方法。

10.9K1 0

Vue合理配置axios并在项目中进行实际应用

yarn add axios | npm install axios 引用插件执行add命令后，CLI会自动帮我们在main.js中引用它，并做一些默认配置。...接下来，带大家看一下，add命令都做了哪些事情 src下新建了一个plugins文件夹，这个文件夹用于存放Vue引入插件的相关配置文件在plugins文件夹中，新建了axios.js文件在package.json...(response.data.code===401){ localStorage.removeItem("token"); } // 只返回response中的data数据 return...响应失败后对状态码进行统一处理在请求拦截中添加token 在响应拦截中对token过期进行相应处理 api抽离接口域名抽离抽离API和域名接口为什么要进行API抽离？...// 挂载到原型（main.js） Vue.prototype.$api = api; 实际应用例如这样一个场景：后端的所有接口都需要登录后，根据成功登录返回的token进行访问。

2.5K2 0

Vue 框架学习系列七：Axios 与 HTTP 请求在 Vue 3 中的应用

Axios是一个基于Promise的HTTP客户端，它可以在浏览器和Node.js中运行，并且提供了易于使用的API来处理HTTP请求和响应。...在Vue 3项目中，Axios是一个流行的选择，用于与后端API进行交互。安装Axios首先，你需要在Vue 3项目中安装Axios。...你可以使用npm或yarn来安装它：npm install axios # 或者 yarn add axios配置Axios实例在Vue 3项目中，通常会在一个单独的文件中创建一个Axios实例，并配置一些全局设置...在上面的示例中，我们已经在响应拦截器中处理了一个401未授权错误。你可以根据需要添加更多的错误处理逻辑。...结语通过本文的介绍，你应该已经了解了如何在Vue 3项目中安装、配置和使用Axios来处理HTTP请求。Axios提供了易于使用的API和强大的功能，使其成为与后端API进行交互的流行选择。

1.9K1 0

通过 Laravel 创建一个 Vue 单页面应用（五）

在这个过程中，我们将会考虑构建一个 Axios 客户端实例，以便我们在配置 API 客户端时具有更高的灵活性。...(response); }); } 我们在 API 客户端调用 delete() 方法，然后绑定一个回调函数来注销控制台中的响应对象。...在传统的网页应用中，我们会删除那条用户记录，然后重定向返回用户列表。在我们的SPA单页应用中，我们也可以通过编程方式将用户导航到 /users 页面的方式来实现这一点： this....API客户端选项尽管我们奉献的 users.js 在小型应用程序中，HTTP 客户端可能被认为是有点小题大做了，我认为分离已经为我们提供了很好的服务，因为我们在多个组件中使用了 API 模块。...如果你想了解灵活客户端提供的所有细节，我在我的文章构建灵活的Axios客户端中详细讨论了这个想法。在不改变客户机的外部 API 的情况下，我们可以改变客户机在后台的工作方式。

5.9K2 0

vue中Axios的封装和API接口的管理

一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。...然后在我们的页面中可以这样调用我们的api接口： import { apiAddress } from '@/request/api';// 导入我们的api接口 export default {...实例，然后定义接口、调用axios实例并返回，可以更灵活的使用axios，比如你可以对post请求时提交的数据进行一个qs序列化的处理等。...3.restful风格的接口，也可以通过这种方式灵活的设置api接口地址。最后，为了方便api的调用，我们需要将其挂载到vue的原型上。...$api = api; // 将api挂载到vue的原型上然后我们可以在页面中这样调用接口，eg： methods: { onLoad(id) { this

4.1K1 1

axios详解以及完整封装方法

中axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。...然后在我们的页面中可以这样调用我们的api接口： import { apiAddress } from '@/request/api';// 导入我们的api接口 export default {...3.restful风格的接口，也可以通过这种方式灵活的设置api接口地址。最后，为了方便api的调用，我们需要将其挂载到vue的原型上。...在main.js中 import Vue from 'vue' import App from './App' import router from '....$api = api; // 将api挂载到vue的原型上然后我们可以在页面中这样调用接口，eg： methods: { onLoad(id) { this.

15.4K1 3

前后端权限机制

在vuex中还要设置module // 用户登录 user.js export default { state:{ isLogin:!!...因此可在src根目录中写一个service文件夹，加一个user.js：另写一个： // service/user.js import axios from 'axios'; const path='http...在src根目录下创建一个interceptor.js import axios from 'axios'; export default function(){ axios.interceptors.request.use...401 ctx.status = 401 } } // 无法通过auth中间件认证，这个接口将不会得到预期结果 router.get('/api/userinfo',auth,async...现在在interceptor中设置： // 设置401的响应操作 axios.interceptors.response.use((res)=>{ return res

1.6K3 0

点击加载更多

Laravel Vue 前后端分离使用token认证

JDL-GateWay物流网络SDK的设计与使用

实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡

Laravel 的优雅之处之，Passport搭建SSO系统

通过 Laravel 创建一个 Vue 单页面应用（二）

laravel + passport的Aouth2.0全解

node与浏览器中的cookie

web3服务端身份验证

通过 Laravel 创建一个 Vue 单页面应用（三）

vue + quill富文本编辑器实现自定义图片上传功能

构建Vue项目-身份验证

axios封装token示例

Nuxt + Koa2 + Mongodb 手撸一个网上商城

Nuxt + Koa2 + Mongodb 手撸一个网上商城

Vue合理配置axios并在项目中进行实际应用

Vue 框架学习系列七：Axios 与 HTTP 请求在 Vue 3 中的应用

通过 Laravel 创建一个 Vue 单页面应用（五）

vue中Axios的封装和API接口的管理

axios详解以及完整封装方法

前后端权限机制

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐