Restringir acesso da URL por meio da api wix router

Matheus, Boa tarde. Não recebi a segunda parte do código. A primeira parte já implementei.

Muito obrigado Matheus. A segunda parte vc vai passar por aqui?

@NMTD ADVOGADOS Vou tentar te passar o máximo que conseguir por aqui, mas é um exemplo complexo para se implementar seguindo o post. Vou dividir em duas partes. Primeira parte a autenticação e a segunda parte a integração com o wix-router.

1. instale o pacote jwt-simple e o bcrypt, por meio do npm. Veja como fazer.

2. Crie um módulo auth.jsw no seu backend.

Agora podemos seguir com a implementação do módulo. Primeiro pela função de cadastro. Aqui considero que já tenha coleção para cadastrar os usuário em sua base. Lembre que é preciso adicionar os dados de permissões do usuário na etapa.

import jwt from 'jsonwebtoken';
import bcrypt from 'bcrypt';

const SECRET = 'asd#@dldu';

export async function register(user) {

 const salt = await bcrypt.genSalt(10);
    user.password = await bcrypt.hash(user.password, salt);
 //salve o usuário na base de dados usando api wix-data
}

export async function login(email, password) {
 const user = {} //aqui a busca o usuário na base por email usando o wix-data
 if (user) {
 const validPassword = await bcrypt.compare(password, user.password);
 if (!validPassword)
 throw new Error('Senha inválida');
 //cocloque os dados que precisa no

 var token = jwt.encode({ email: user.email, nivelAcesso: user.nivel }, SECRET);

 var token = jwt.sign({ id: user.id, email: user.email, nivelAcesso: user.nivel }, SECRET, {
            expiresIn: 24 * 60 * 60 // 24hrs 
        });
        return token;
    } else {
 throw new Error('Usuário não encontrado');
    }
}

export async function verifyJWT(token) {
 if (!token)
 throw new Error('token não informado')
 try {
 const decoded = jwt.verify(token, SECRET);
 //token válido retorna true
        return true;
    } catch {
 throw new Error('token inválido')
    }

}

Bom dia Matheus, até hoje você não me disponibilizou a aplicação jwt, conforme havia sido prometido.

Parece que vc já tinha algo pronto.

É possível atender meu pedido (feito há mais de um ano)?

Agradeço, desde já, o empenho e dedicação.

Att,

Matheus, boa tarde, por gentileza apenas me dê um retorno sobre meu problema. Obrigado

Olá Matheus, peço a gentileza, se possível for, de me dar um retorno. Estou desde 15 de maio aguardando sua resposta. Valeu

Matheus, tudo bem? Estou aguardando o seu retorno. Obrigado

Oi Matheus, tudo bem? Conseguiu postar o exemplo de implantação do Jwt? Aguardo retorno. Obrigado

Olá Matheus, fico no aguardo do exemplo. Muito obrigado por enquanto.

Oi Matheus, aguardando o seu retorno. Obrigado

Oi Matheus, tenho conhecimento intermediário de Java CSS e HTML. Já vi algumas aplicações de JSON Web Token e Passport, mas nada dentro do wix. Particularmente, nunca manipule esta API. Mas, caso vc me ajude na implantação dela, não vejo nenhum problema. Muito obrigado pela disposição e empenho.

Oi Matheus, vamos lá...

Eu realizo o login com o código abaixo destacado. Uma observação: No meu banco de dados (Usuário), tem uma coluna denominada "nível", onde eu autorizo as permissões de acordo com o usuário. O "nível 2" é destinado apenas ao meu usuário (rodrigo@........) e tem permissão para acessar a página restrita ("/painel-controle-administrador"). Os meus clientes, por sua vez, têm acesso ao "nível 1", que é uma página dinâmica ("/login-cliente-geral"), onde eu passo todos os dados por meio de 02 (dois) bancos de dados vinculados.

import wixData from "wix-data";
import wixLocation from "wix-location";
import { session } from "wix-storage"
import { setUserId } from 'public/user-info.js'
//////////////////////////////////////////////// 

export function BbtnLogar_click(event, $w) {
 if (!checarCampos()) {
 let email = $w("#TbUser").value;
 let pass = $w("#TbPass").value;

        $w("#box2").show()
            .then(() => {
                wixData.query("Usuarios")
                    .eq("email", email) 
                    .find()
                    .then((user) => {

 let registro = user.items[0];
 if (user.items.length === 1) {
 let control = registro.senha
 let nivel = registro.level
 if (pass === control && nivel === "2") {
                                session.setItem("logado", true)
                                wixLocation.to("/painel-controle-administrador")
                                console.log("Logado");

                            }
 

 else if  (pass === control && nivel === "1") {
                                session.setItem("logado", true)
                                wixLocation.to("/login-cliente-geral")
                                console.log("Logado");

                                setUserId(user.items[0]._id) // <----Gravação do id do usuário em sessão
                                console.log(registro._id)

 
                            } else {
                                erro("Suas credenciais não estão corretas!")
                                                 }
                        } else {
                            erro("O e-mail informado não está registrado!")
                           
                        }

                    })
                    .catch((err) => {
 let errorMsg = err;
                        console.log(errorMsg)
                    });
            })

    } else {
        erro(apontarCampo())
    }
}

export function TbUser_keyPress_1(event, $w) {
    recolheErro()
 
}
export function TbPass_keyPress_1(event, $w) {
    recolheErro()
 
}


// Funções // 
////////////////////////////////////////////

/*Verifica a integridade dos campos antes dos processos de consulta*/
function checarCampos() {
 let algumCampo = false
 if ($w("#TbUser").value === "" || $w("#TbPass").value === "") {
        algumCampo = true
    }
 return algumCampo;
}

/*Aponta o campo encontrado com erro pela função checar campos*/
function apontarCampo() {
 let mensagem;
 if ($w("#TbUser").value === "") {
        mensagem = "O campo e-mail é obrigatório"
        $w("#TbUser").focus()
    } else if (!$w("#TbUser").valid) {
        mensagem = "O e-mail informado não tem um formato válido"
        $w("#TbUser").focus()
    } else if ($w("#TbPass").value === "") {
        mensagem = "O campo senha não foi informado"
        $w("#TbPass").focus()
    }
 return mensagem
}

/*Mostra erros em tela*/
function erro(mensagem) {
    $w("#txtErro").text = mensagem;
 let slideOptions = {
 "duration": 1000,
 "delay": 0,
 "direction": "top",
    };
    $w("#boxErro").show("slide", slideOptions)
    offPreload()
}

/*Recolhe as mensagens de erro*/
function recolheErro() {
 if ($w("#txtErro").rendered) {
 let slideOptions = {
 "duration": 1000,
 "delay": 0,
 "direction": "top",
        };
        $w("#boxErro").hide("slide", slideOptions);
        setTimeout(() => {
            $w("#txtErro").text = '';
        }, 1000);
        offPreload()
    }
}

/*esconde o loading*/
function offPreload() {
    $w("#box2").hide()

}


/*função olho mágico de password*/
$w.onReady(function () {  
    $w("#showPassword").show()
})

export function showPassword_click_1(event) {
    $w("#TbPass").inputType = "text";
    $w("#hidePassword").show()
    $w("#showPassword").hide()
}

export function hidePassword_click_1(event) {
    $w("#TbPass").inputType = "password";
    $w("#hidePassword").hide()
    $w("#showPassword").show()
}

Para restringir o acesso a página, eu fiz uma função denominada "ckeckLogin", que fica na parte public do meu site.

import { session } from 'wix-storage'
import wixLocation from 'wix-location'

export function checkLogin() {
 let check = false;
 if (session.getItem("logado")) {
        check = true
    } else {
        wixLocation.to("/index")
    }
 return check;
}

Com isso, chamo a função "checkLogin" na minha página restrita.

(Abaixo apenas trecho do código para essa finalidade)

import wixData from 'wix-data';
import wixLocation from "wix-location";
import { getUserId, logout } from 'public/user-info.js'
import { checkLogin } from 'public/help.js'

$w.onReady(function () {
 if (checkLogin()) {
        $w("#faixa1").expand("fade")
        $w("#faixa2").expand("fade")
        $w("#line").expand("fade")

    }
}); 


........

tudo dá certo, mas entendo que a restrição de URL como estou fazendo não é profissional. Posso melhorar muito com a API wix Router.

Se precisar de mais informações, estou a disposição.

Muito obrigado Matheus.

Oi Matheus. Obrigado pelo pronto retorno. No entanto, esqueci de informar um detalhe muito importante.

No meu site, utilizo a API wix User apenas para o meu blog. Até aqui tudo bem. Contudo, para clientes do site (sou advogado) uso banco de dados pessoal, sem vínculo com API wix user.

Portanto, as regras para membros não serão aproveitadas para o meu sistema pessoal. Por isso, que eu quero implementar uma solução profissional de restrição de URL usando wix router.

Só para justificar porque eu não uso a coleção "private Members" do wix para meus clientes é porque não posso manipular a função "esqueci minha senha". Há uma página PADRÃO (que não pode ser alterada) que quebra o layout do meu site. Outra razão é porque a API é bem restrita, permitindo, apenas, o usuário fazer a leitura no banco de dados.

Tendo em vista estas considerações, peço, se possível for, e dentro de seu vasto conhecimento, para me ajudar em criar a restrição de URL com a API wix router.

Desde já agradeço sua atenção e empenho neste fórum. Obrigado

Oi Rodrigo.

Não precisa de código para fazer isso.

1. Crie uma função exclusiva para seu usuário https://support.wix.com/pt/article/criando-fun%C3%A7%C3%B5es-do-membro

2. Crie uma página e limite o acesso para essa função de usuário https://support.wix.com/pt/article/criando-p%C3%A1ginas-exclusivas-para-membros-1016679

Espero ter ajudado!