打赏作者

Laravel Vue SPA - 登录返回 Token

Laravel Vue 开发 SPA 应用 >> Laravel Vue SPA - 登录返回 Token 视频发布于 2017-10-10

在 SPA 中实现登录的时候，重点是从 OAuth Server 端获取 token，本节视频中我们实现登录页面并且从后端获取到 access_token ，然后保存到 localStorage 中以便后续使用。

登录并参与讨论

7年前

在反复的调试之后，我无奈的抛出这个错误：
“error”: “unsupported_grant_type”,
“message”: “The authorization grant type is not supported by the authorization server.”,
“hint”: "Check the grant_type parameter"
我的 grant_type = ‘password’ ，
教主，这是为何呢？

7年前

好吧，在postman中，我用 form-data 报错，必须改成：x-www-form-urlencoded 才正常，也是醉了。。。

7年前

vue与api跨域的时候报错Access-Control-Allow-Origin，但即使在注册possport路由的时候加上带header("Access-Control-Allow-Origin:*");的是间件也还是会报错。
注册路由：
Passport::routes(null,['prefix'=>'api/oauth','middleware'=>'access.header']);
中间件：

public function handle($request, Closure $next)
    {
        header("Access-Control-Allow-Origin:*");
        header("Access-Control-Allow-Credentials: true");
        header("Access-Control-Allow-Methods: *");

        return $next($request);
    }

vue：

mounted () {
      axios({
        method: 'post',
        url: '/oauth/token',
        withCredentials: true,
        data: {
          client_id: '2',
          client_secret: 'kCvv28qy25rIw5IYvAwpIHNQvBMnH6FElrzxqvqP',
          username: 'test@test.com',
          password: '123456',
          scpoe: '',
          grant_type: 'password'
        }
      })
        .then(response => {
          console.log(response.data)
        })
}

在postman中测试，返回headers中是带有Access-Control-Allow-Origin -> *的。

2kpo 回复 yzha5

7年前

跨域你可以试试laravel-cors这个包

liujun 回复 yzha5

7年前

laravel-cors包

不了了了了了之

7年前

@JellyBool, 请问你oauth server side的页面是怎么得到的？
有教程之类的吗？

JellyBool 回复不了了了了了之

7年前

oauth server side 这个是什么？指的是哪个页面？

不了了了了了之回复 JellyBool

7年前

这个东西

JellyBool 回复不了了了了了之

7年前

这个就一个 chrome 的插件：postman ，只是用来发送请求的而已

7年前

@JellyBool 大大請問一下：

我按照步驟到後面登入之前，我有先用 Postman 打看看，的確有正確回傳 token 資料，如下圖：

Postman

但是當我在網頁登入卻會跳出如下圖視窗要我輸入帳號密碼，請問原因是為什麼呢？
Login頁面登入

7年前

我知道為什麼了，我在用 axios 打 api 的時候沒有指定 formdata, 應該要改寫成 this.formdata

上述這樣還是不對，變成無法將資料送進 formparams，好吧我等待大大們的救援ＸＤ

JellyBool 回复 blaze0207

7年前

你是不是用了 basicAuth 这里的 middleware？

blaze0207 回复 JellyBool

7年前

請問要看哪裡才知道是不是用了 basicAuth 这里的 middleware？

hao 回复 blaze0207

7年前

@blaze0207 您好，我發現這邊client_id & client_secret 打錯也會報跟您一樣的錯，要再檢查一次嗎?
let formData = {
client_id:‘這個輸入env passport中其中一組ID’,
client_secret:‘輸入對應ID的secret’,
grant_type:‘password’,
scope:’’,
username : this.email,
password : this.password
};

blaze0207 回复 hao

7年前

我的 code 如下：

methods: {
      login() {
        let formdata = {
          client_id: '2',
          client_screct: 'tu6Sl2Da0I55hJo3IHS0UiOoAqEqLV9BDWgWfMLR',
          grant_type: 'password',
          scope: '',
          username: this.email,
          password: this.password
        }
        axios.post('/oauth/token', formdata)
            .then(res => {
              // JWTToken.setToken(res.data.access_token)
              console.log(res)
            })
      }
    }

看起來有一樣嗎？我是照著教程寫的應該是沒錯

7年前

我知道錯在哪裡了！！！！

我把 client_secret 打成 client_screct 了

感謝 @hao 哈～～你救了我，犯了低級錯誤ＸＤ

JellyBool 回复 blaze0207

7年前

哈哈哈哈哈哈哈。。。。

7年前

按照上节配置完以后postman 返回的结果不一致

wx20180113-163239

JellyBool 回复 smile1line

7年前

username 是 email 吧

7年前

这里能用非email字段做登录名吗？

JellyBool 回复 liyingxuan

7年前

非 email 的话，你需要改一下 laravel 内部的 LoginController 的代码：

 public function username()
    {
        return 'email';// 改这个试试
    }

7年前

我看github上有用vuex做的login功能，那个好像简单点

4年前

请问一下，报500错误，Response:Replicating claims as headers is deprecated and will removed from v4.0. Please manually set the header if you need it replicated.怎么解决？