Para utilizar os componentes o projeto deve respeitar os seguintes requisitos:
- Vue 2.x
- Vuetify 2.x
- Vue router
- Material Design Icons
-
Adicione a dependencia
yarn add atlantis-auth
-
Configure o plugin:
// ./plugins/atlantis.js
import Vue from "vue";
import VueAtlantisComponents from "atlantis-auth";
import {
CLIENT_ID,
ATLANTIS_URL
} from "@/constants/env.constant";
import store from '@/store';
import router from '@/router';
import api from '@/api';
Vue.use(VueAtlantisComponents, {
clientId: CLIENT_ID,
atlantisUrl: ATLANTIS_URL,
privateRoute: "private",
publicRoute: "public",
store,
router,
axiosInstance: api,
lang: "pt-BR"
});
- O módulo
AtlantisAuthModule
será instalado automaticamente no seu store; - Sua rota 'private' e todos seus filhos irão executar o
AtlantisPrivateGuard
; - Sua rota 'public' e todos seus filhos irão executar o
AtlantisPublicGuard
; - Configura interceptors na instancia do axios;
- Importe o arquivo criado em
main.js
import "./plugins/atlantis";
- Adicione o mixin de resposta do código na view pública (landing neste caso):
<script>
import { AtlantisVertifyCodeMixin } from "atlantis-auth";
export default {
mixins: [AtlantisVertifyCodeMixin],
...
};
</script>
- Adicione os componentes no arquivo
/plugins/vuetify.js
.
import Vuetify, {
VIcon,
VMenu,
VAvatar,
VSubheader,
VList,
VListItem,
VListItemAvatar,
VListItemContent,
VListItemTitle,
VListItemSubtitle,
VDivider
} from "vuetify/lib";
Vue.use(Vuetify, {
components: {
VIcon,
VMenu,
VAvatar,
VSubheader,
VList,
VListItem,
VListItemAvatar,
VListItemContent,
VListItemTitle,
VListItemSubtitle,
VDivider
}
});
Botão que redireciona o usário o Atlantis.
<template>
<AtlantisLoginBtn />
</template>
<script>
import { AtlantisLoginBtn } from "atlantis-auth";
export default {
components: {
AtlantisLoginBtn
}
};
</script>
Exibe o avatar e menu com dados da conta e links de logout e configuração de conta.
<template>
<AtlantisAccount />
</template>
<script>
import { AtlantisAccount } from "atlantis-auth";
export default {
components: {
AtlantisAccount
}
};
</script>
TODO
TODO
TODO
TODO
yarn run build
yarn run lint