Question

我为firebase创建了授权组件。并且发现了很多关于如何创建授权服务的帖子，其中大部分是关于创建一些全局const或一种非常有趣的方法-使用auth方法创建vue插件。

但是当我自己做时，我很容易在vuex中创建Auth模块，并在创建app.vue生命周期中调用操作以检查用户并在存储中传递该数据。

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

}

对于路由器，我有类似后继的逻辑，只需从状态检查用户即可。

所以现在我有一个问题，用身份验证服务或vuex模块的vue插件会更好吗？

Answer 1

您遇到的情况有三种不同的工件： Vue插件，身份验证服务和 Vuex模块 ！!!!

身份验证服务

您需要身份验证服务来抽象您的授权服务器（Firebase）API。身份验证服务应不具备DOM或商店的知识。它严格处理网络层。

Vuex商店

如果您需要在应用程序的不同视图/组件之间提供身份验证数据，则应在商店中维护身份验证数据。因此，您的路由器或组件将与 Vuex商店对话，而后者又通过商店actions与 Auth Service 对话。

Vue插件

现在，这变得很有趣。如果您有多个（和单页）应用程序需要相似的功能，并且它们是不同的程序包或维护在不同的存储库中，那么插件是共享此可重用逻辑的最佳方法。另外，如果您的代码需要执行any of the following，则需要一个插件：

添加一些全局方法或属性
添加一个或多个全局资产：指令/过滤器/转换
通过全局混合添加一些组件选项。
通过将某些Vue实例方法附加到Vue.prototype来添加它们。
提供自己的API的库，同时注入上述内容的某种组合。

由于Vuex商店可以通过操作处理身份验证，因此您可能不需要插件。

关于在此auth数据之上运行的实用程序功能，您可以简单地使用标准ES模块，而不是先包装然后使用Vue.js插件

在哪里可以将授权逻辑放在vue.js中？

1 个答案:

身份验证服务

Vuex商店

Vue插件