Sem permissão

Quando a pessoa chega a uma tela ou ação que o perfil dela não permite, a tela diz isso com calma e diz a quem pedir o acesso.

Quando usar

• A pessoa abriu pelo endereço, por um link antigo ou por um favorito uma tela que o perfil dela não permite.
• A API respondeu que a pessoa não pode ver aquele registro.

Para ações dentro de uma tela permitida, o melhor é não mostrar o botão a quem não pode usá-lo. A API confere de novo, porque a tela nunca é a única barreira.

Componentes

• BasePageState com status="forbidden": ícone de cadeado, título e texto padrão. Não há botão padrão; a tela decide para onde levar a pessoa, pelo slot action.
• BaseButton ou BaseLink no slot action: "Ir para o início" ou "Voltar para a lista".

Texto

• O texto padrão já serve na maioria das telas: "Você não tem acesso a esta página" e "Se precisa dela para o seu trabalho, peça o acesso ao gestor da sua unidade."
• Troque text quando souber quem libera o acesso: "Peça o perfil de fiscal à Coordenadoria de Obras."
• Não use "Acesso negado", "Forbidden" ou "Erro 403".

Faça e não faça

Faça	Não faça
Dizer a quem pedir o acesso.	Só dizer que a pessoa não pode.
Esconder os botões de ações que o perfil não permite.	Mostrar o botão e responder "Sem permissão" no clique.
Oferecer um caminho de volta, como "Ir para o início".	Deixar a pessoa numa tela sem saída.

Código

<script setup lang="ts">
import { computed } from 'vue'
import { BaseButton, BasePage, BasePageState } from '@lab-inovacao-tjes/design-system'

const props = defineProps<{ canSee: boolean; loading: boolean }>()
const status = computed(() => {
  if (props.loading) return 'loading'
  return props.canSee ? 'ready' : 'forbidden'
})
</script>

<template>
  <BasePage title="Painel gerencial">
    <BasePageState :status="status" loading-label="Carregando o painel">
      <template #action>
        <BaseButton kind="secondary" @click="router.push('/home')">Ir para o início</BaseButton>
      </template>
      <!-- Conteúdo do painel. -->
    </BasePageState>
  </BasePage>
</template>

Na tela de referência

• P19: em construção. As telas já escondem os botões de quem não pode usá-los (useConstructionAccess), mas ainda não há a tela de sem permissão.
• P20: em construção.