时间戳

首页 > 解决方案 > 使用 Laravel Passport（隐式授予令牌）成功 Oauth 后正确重定向到 Vue SPA

laravel - 使用 Laravel Passport（隐式授予令牌）成功 Oauth 后正确重定向到 Vue SPA

问题描述

我有一个 Laravel 后端和一个 Vue SPA 前端。到目前为止，我已经设法使隐式授予令牌正常工作。我的问题是关于重定向。

认证成功后，Laravel 会重定向到http://localhost:8080/auth/callback# access_token=AUTH_TOKEN&token_type=TOKEN_TYPE&expires_in=EXPIRES_IN 而不是http://localhost:8080/auth/callback? access_token=AUTH_TOKEN&token_type=TOKEN_TYPE&expires_in=EXPIRES_IN（注意#和？）。验证成功后，我必须手动输入正确的 URL。

首先，如何确保将其正确重定向到正确的 URL？

标签： laravellaravel-5vuejs2laravel-passport

解决方案

基于this Stack Overflow answer，我设法找到了解决方法。此功能是不是错误并重定向到 myurl.com？不能解决问题。这是我的解决方案。在我的路由器索引文件中，我有两个条目。

第一个是 OAuth API 将令牌返回到的重定向。beforeEnter 路由器方法获取 URL 字符串，将 # 替换为 ? 下一个方法将应用程序重定向到保存路径。

indexOf 方法获取 ? 在新格式的 url 中并将其传递给截断 http(s):// 部分的子字符串方法，以便该解决方案适用于 http 和 https。

截断导致?access_token. 然后将其附加到下一个方法路径条目，因此，可以通过 route.query 对象从 /save 处的组件访问该道具。

{
  path: `/auth/callback`,
  beforeEnter: (to, from, next) => {
    let url = window.location.href
    if(url.includes('#')) {
      let newUrl = url.replace('#', '?');
      next({path: `/save${newUrl.substring(newUrl.indexOf('?'))}`})
    }
    next();
  },
},
{
  path: `/save`,
  component: Auth,
  props: (route) => ({
    access_token: route.query.access_token
  })
},

推荐阅读