Teknisa Libraries

# Atualizações

Informação

Se você iniciou seu projeto com o Teknisa CLI versão 1.37 (ou superior), esse tutorial não é necessário. Apenas certifique-se que seu backend (dependências como a LIB) esteja alinhado com o frontend.

Alerta

A versão mais atual do Login Next (opens new window) é compatível com a versão 2 da Tek - Lib. Caso esteja utilizando a versão 1 da Tek - Lib, será necessário, além das atualizações abaixo, atualizar seu módulo de Login para a versão mais recente, juntamente com suas dependências.

# Arquivos


# Arquivos a serem criados

  • public/metadata/login.json
  • src/controllers/LoginController.ts
# Arquivos a serem modificados

  • src/config/devEnvironment.json
  • src/plugins/zeedhi.ts
  • src/router.ts ou src/router/routes.ts e src/router/index.ts
  • src/controllers/index.ts
  • src/controllers/AppController.ts
  • src/views/Microservice.ts
  • App.vue

Nota

O código atual do Teknisa CLI Produto (opens new window) e do Teknisa CLI Módulo (opens new window) podem ser consultado.

# Tela de Login


Siga o tutorial da seção Componentes - TekLogin.

# Config.ts


Após criar os arquivos, verifique se seu Config.ts tem as propriedades do exemplo abaixo.

...
env: {
    product: env.product,
    baseUrl: env.baseUrl,
    modules: env.modules,
    loginRoutePath: env.modules.login.routePath,
    loginBackgroundImgUrl: env.modules.login.backgroundImgUrl,
    loginEndPoint: env.modules.login.endPoint,
  },
...

Exemplo de arquivo Config.ts.

import { IConfig } from '@zeedhi/core';
import prodEnvironment from './prodEnvironment.json';
import devEnvironment from './devEnvironment.json';

const env = process.env.NODE_ENV === 'production' ? prodEnvironment : devEnvironment;

const config: IConfig = {
  endPoint: env.endPoint,
  metadataEndPoint: env.metadataEndPoint,
  env: {
    product: env.product,
    baseUrl: env.baseUrl,
    modules: env.modules,
    loginRoutePath: env.modules.login.routePath,
    loginBackgroundImgUrl: env.modules.login.backgroundImgUrl,
    loginEndPoint: env.modules.login.endPoint,
  },
};

export default config;

# Componentes


É necessário importar e registrar os componentes. Isso é feito no aquivo de configuração zeedhi.ts que fica dentro da pasta plugin.

import TekLibComponents from '@zeedhi/tek-lib';  
  
Vue.use(TekLibComponents);

Após essas etapa, o(s) componente(s) da Tek - Lib estarão disponíveis para uso na sua aplicação.

# Rota de Login


No arquivo router.ts ou router/routes.ts, crie uma nova rota para a tela de login:

...  
{  
    path: '/auth/login',  
    name: 'login',  
    component: ZdPage,  
    props: () => ({  
        path: 'login',  
        local: true,  
    }),  
}  
...

Nota

A propriedade path deve possuir o mesmo valor que a propriedade routePath definida nos arquivos environment da seção Configurações.

# Serviços


Locais que importam e utilizam os serviços da Tek - Lib sofreram alterações. Nos arquivos abaixo, altere o código para correto funcionando com a versão 2.

  • src/router.tsou src/router/routes.ts e src/router/index.ts
  • src/controllers/AppController.ts
  • src/views/Microservice.ts
  • App.vue

# Alterações

# LocalStorage
  • Antes:
import { LibLocalStorage } from '@zeedhi/tek-lib';
  • Depois:
import { TekLibLocalStorage } from '@zeedhi/tek-lib';
# Auth
  • Antes:
import { LibAuth } from '@zeedhi/tek-lib';
  • Depois:
import { TekLibAuth } from '@zeedhi/tek-lib';
# Auth uso
  • Antes:
LibAuth.getInstance().startLib();
  • Depois:
TekLibAuth.startLib();

Informação

Os métodos da classe TekLibAuth passaram a ser chamados diretamente sem a necessidade do getInstance().

# App.vue


No inicio do método created, é necessário alterar o nome da string que é passada como primeiro parâmetro para o listener.

  • Antes
public created() {
  LibAuth.getInstance().startLib();
  window.addEventListener('message', this.handleMessageEvent);
  ...
  • Depois
public created() {
  TekLibAuth.startLib();
  window.addEventListener('afterLogin', this.handleMessageEvent);
  ...

No método mounted foi adicionado um if.

  • Antes
public mounted() {
  this.setMenu();
}
  • Depois
public mounted() {
  if (!this.isRouteLogin) {
    this.setMenu();
  }
}

O método handleMessageEvent também foi alterado como mostrado abaixo.

  • Antes
private handleMessageEvent(event: any) {
  if (event.data.type === 'afterLogin') {
    this.afterLogin(event.data.userData);
  }
}
  • Depois
private handleMessageEvent(event: any) {
  this.afterLogin(event.detail.userData);
}

O método isCleanLayout teve seu nome alterado. Fique atento para alterar os locais onde o método é chamado.

  • Antes
get isCleanLayout() {
  return this.$route.path === Config.env.loginRoutePath;
}
  • Depois
get isRouteLogin() {
  return this.$route.path === Config.env.loginRoutePath;
}

← Changelog →