Где я могу поместить логику авторизации в vue.js?

Question

Я создаю компонент авторизации для firebase. И нашел много постов о том, как можно создать сервис авторизации, большая часть этого поста была о создании какого-то глобального константного или очень интересного способа - создания плагина vue с методами auth.

Но когда я делаю это сам, я легко создаю модуль Auth в vuex и вызываю действие при создании жизненного цикла app.vue для проверки пользователя и передаю эти данные в хранилище.

Post при создании auth в vue плагине.

И мое решение

import {VuexModule, Module, Mutation, Action} from 'vuex-module-decorators'
import * as firebase from 'firebase';
import { SingUpActionPayload, ResponseError, SingUpMutationPayload} from "./interfaces/singUp";

@Module
export default class Auth extends VuexModule {
    singUpData: any;
    singUpError: ResponseError = {
        code: '',
        message: ''
    };

    @Action({rawError: true})
    async singUp (payload: SingUpActionPayload) {
        try {
            let result = firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password);
            await result;
            this.context.commit('setCurrentUser', firebase.auth().currentUser);
            this.context.commit('setSingUpResult', {type: 'result', result});
        } catch (error) {
            this.context.commit('setSingUpResult', {type: 'error', error});
        }
    }


    @Mutation
    setSingUpResult(payload: any){
        if(payload.type === 'result'){
            this.singUpData = payload.result;
        } else {
            this.singUpError = payload.error;
        }

    }

}



@Module
export default class UserModule extends VuexModule {
    currentUser = null;

    @Action({commit: 'setCurrentUser'})
    takeCurrentUser(){
        return  firebase.auth().currentUser;
    }

    @Mutation
    setCurrentUser(payload: any){
        this.currentUser = payload;
    }

}

для маршрутизатора у меня похожая логика, как в посте, просто проверьте пользователя из состояния.

Так что теперь у меня есть вопрос, какой способ быть более хорошим, vue плагин с сервисом аутентификации или модуль vuex?

Answer 1

В вашем случае есть три различных артефакта: Vue Plugin , Сервис аутентификации и Модуль Vuex !!!

Сервис аутентификации

Вам нужна служба аутентификации для абстрагирования вашего API сервера авторизации (Firebase).Сервис аутентификации не должен обладать знаниями о DOM или Store.Он строго относится к сетевому уровню.

Vuex Store

Если вам нужны данные аутентификации для разных представлений / компонентов в вашем приложении, то вы должны поддерживать данные аутентификации в вашем магазин .Таким образом, ваш маршрутизатор или компоненты будут общаться с Vuex store , который, в свою очередь, будет обращаться к Auth Service через хранилище actions.

Vue Plugin

Теперь это становится интересным.Если у вас есть несколько (и одностраничных) приложений, которым требуется аналогичная функциональность, и они представляют собой разные пакеты или поддерживаются в разных репозиториях, тогда плагины - лучший способ поделиться этой многоразовой логикой.Кроме того, если ваш код должен выполнить любое из следующих действий , вам понадобится плагин:

• Добавьте некоторые глобальные методы или свойства
• Добавьте один или несколькоглобальные активы: директивы / фильтры / переходы
• Добавить некоторые параметры компонентов с помощью глобального миксина.
• Добавить несколько методов экземпляра Vue, прикрепив их к Vue.prototype.
• Библиотека, котораяпредоставляет собственный API, в то же время вводя некоторую комбинацию из перечисленного.

Поскольку ваше хранилище Vuex может позаботиться об обработке аутентификации с помощью действий, вам, вероятно, не требуетсяплагин.

Что касается служебных функций, работающих над этими данными аутентификации, вы можете просто использовать стандартные модули ES вместо переноса, а затем использовать плагины Vue.js