VueAuth Những điều bí ẩn

JS May 26, 2020

I. Giới thiệu

Bạn bắt đầu học laravel + VueJS? 99% Ví dụ đầu tiên bạn làm chắc là xây dựng :

  • Backend : Login API trả về JWT token sử dụng một trong những library nổi tiếng có tới 9k stars : https://github.com/tymondesigns/jwt-auth
  • Front End : đương nhiên là để xử lý token trả về bởi login api thì dùng luôn VueAuth cho nó tiện
  • Tút thì đầy search phát là ra vì quá cơ bản:

  –  https://topdev.vn/blog/api-authentication-trong-laravel-vue-spa-su-dung-jwt-auth/

   –  https://viblo.asia/p/authenticate-jwt-voi-vuejs-va-laravel-OeVKB18d5kW

Làm theo tuts trên có chạy k? Chạy chắc luôn nhưng còn đó những bí ẩn khiến bạn đau đầu nên bài viết này sẽ giúp bạn một số típ "hiểm"

I. Login thành công nhưng gọi this.$auth.user() thì lỗi toè mỏ

  • Pre-cond : bạn follow step-by-step tuts và login thành công
  • Problem : Bạn muốn lấy thông tin của user để có gì còn tiện nhét vào các api khác.

     – Bạn thử gọi this.$auth.user() như được bảo

     – Bạn gặp lỗi mặc dù api me() chạy ngon

->  Theo tuts thì config của bạn có phải như thế này :

import bearer from './bearer';
import axios from '@websanova/vue-auth/drivers/http/axios.1.x';
import router from '@websanova/vue-auth/drivers/router/vue-router.2.x';

const config = {
    auth: bearer,
    http: axios,
    router: router,
    tokenDefaultKey: 'mii-crm-auth',
    stores: ['storage','cookie'],
    authRedirect: {
        path: '/login'
    },
    notFoundRedirect: {
        path: '/dashboard'
    },
    registerData: {
        url: 'api/v1/auth/register',
        method: 'POST',
        redirect: '/login',
    },
    loginData: {
        url: 'api/v1/auth/login',
        method: 'POST',
        redirect: '/dashboard',
        fetchUser: true,
    },
    logoutData: {
        url: 'api/v1/auth/logout',
        method: 'POST',
        redirect: '/login',
        makeRequest: true,
    },
    fetchData: {
        url: 'api/v1/auth/me',
        method: 'GET',
        enabled: true,
    },
    refreshData: {
        url: 'api/v1/auth/refresh',
        method: 'GET',
        enabled: false,
        interval: 30,
    },

};
export default config;

Giải pháp : Bí hiểm ở chỗ nếu bạn thiếu config này thì ko hi vọng gì lấy được user

    parseUserData: function (user) {
        return user;
    }

Hàm parseUserData sẽ được gọi để parse kết quả trả về từ api me() và set cho biến user để từ đó bạn có thể truy cập thông qua this.$auth.user() nên đừng quên nó. (Hình như tuts nào cũng hay quên cái này )

II. Ko parse được token trả về

  • Problem : Nếu bạn ko dùng jwt-auth mà dùng một thư viện khác, đồng thời đau một cái là thằng đó trả về token trong response có chữ "Bearer" thay vì "bearer" chẳng hạn thì chắc chắn là VueAuth sẽ ko lấy được token. Hoặc giả sử như API login ko trả về trong header mà trả về trong content của response chẳng hạn thì tình trạng sẽ rất bi đát.  
  • Solution : Rất may VueAuth cho bạn cách để tuỳ biến theo 2 step sau

    – Step 1 : Dùng bearer tự tạo chứ ko dùng bearer mặc đinh của VueAuth. Trong file config hãy thay đổi '@websanova/vue-auth/drivers/auth/bearer.js' trong tuts thành file `bearer.js` của bạn (tạo ở bước 2). Tham khảo ở trên

   – Step 2 : Tạo bearer.js theo format dưới đây và tuỳ biến theo cách của bạn

export default {

    request: function (req, token) {
        // Với các authenticated request thì cần chỉnh cái này
        this.http.setHeaders.call(this, req, {
            Authorization: 'Bearer ' + token
        });
    },

    response: function (res) {
        // Bạn muốn tiền xử lý gì của response 
        /**
         * Check in header first
         */
        var headers = this.http.getHeaders.call(this, res),
            token   = headers.Authorization || headers.authorization;
        /**
         * If not found then it must be in data
         */
        if (!token && ((res.data.token_type === 'bearer') || (res.data.token_type === 'Bearer'))) {
            return res.data.access_token;
        }
        if (token) {
            token = token.split(/Bearer:?\s?/i);
            return token[token.length > 1 ? 1 : 0].trim();
        }
    }
};

< To be continued >

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.