Where i may put authorization logic in vue.js?

Question

I creating authorization component for firebase. And found many post about how may create authorization service, most part of that post was about create some global const or the very interesting way - create vue plugin with auth methods.

But when i do it self i easy create Auth module in vuex and call action in creating app.vue life cycle for check user and pass that data in store.

Post when creating auth in vue plugin .

And my solution

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;
    }

}

for router i have similar logic like in post, just check user from state.

So now i have question, what way be more good, vue plugin with auth service or vuex module?

Harshal Patil Harshal Patil · Accepted Answer · 2019-03-21T04:57:56

There are three distinct artifacts in your case: Vue Plugin, Auth Service, and Vuex Module!!!

Auth Service

You need authentication service to abstract your Authorization Server(Firebase) API. Auth service should possess no knowledge of DOM or Store. It strictly deals with the network layer.

Vuex Store

If you need authentication data to be available across different views/components in your application, then you should maintain auth data in your store. So your router or components will talk to Vuex store which, in turn, talk to Auth Service via store actions.

Vue Plugin

Now, this gets interesting. If you have multiple (and single page) applications which need similar functionality and they are different packages or maintained in different repositories, then plugins are the best way to share this reusable logic. Also, if your code needs to do any of the following, then you need a plugin:

Add some global methods or properties
Add one or more global assets: directives/filters/transitions
Add some component options by global mixin.
Add some Vue instance methods by attaching them to Vue.prototype.
A library that provides an API of its own, while at the same time injecting some combination of the above.

Since your Vuex store can take care of handling authentication via actions, you probably do not need a plugin.

As far as utility functions operating on top of this auth data are concerned, you can simply use standard ES Modules instead of wrapping then using Vue.js plugins

Where i may put authorization logic in vue.js?

1 Answers

Auth Service

Vuex Store

Vue Plugin