Dilemmaer i forbindelse med cybersikkerhed: Læk af data
Førjulsræset er i fuld gang. I jagten på gaver til deres kære er folk i stigende grad villige til at "storme" onlinebutikker
![Codest](https://thecodest.co/app/uploads/2024/05/v8a9890-min.jpeg)
Remix er et full-stack webframework med fokus på webfundamentaliteter og moderne UX.
Ja, dette er endnu en JS men bliv hængende lidt længere, da dette framework er lavet af Michael Jackson og Ryan Florence de smarte fyre bag React Router. Jeg håber, at det fik din opmærksomhed, så lad os se, hvad der er godt ved Remix-rammeværk.
Remix er en serverside-ramme, der er bygget oven på API til webhentning og React Routerhar hver rute i remix tre primære eksportvarer a læsser
, en handling
og en standard komponent
eksport. Den læsser
funktion vil blive kaldt på serveren før rendering for at levere data til ruten, vil handling
er ansvarlig for datamutationen, er standardeksporten den komponent, der vil blive gengivet på den pågældende rute. Den læsser
og handling
funktioner køres kun på serversiden og skal returnere en Svar objektet, den standard
eksport køres både på server- og klientsiden.
Sådan initialiseres et nyt remix projekt:
npx create-remix@latest
VIGTIGT: Vælg "Just the basics" og derefter "Remix App Server", når du bliver bedt om det.
cd [det navn, du har givet projektet]
npm run dev
```
Åbn op http://localhost:3000. den skab-remix
kommandoen giver dig en startskabelon med følgende struktur:
app
mappen vil indeholde alle dine programruter og Kode.app/entry.client.jsx
er det første stykke kode, der kører i browseren, og som bruges til at hydrat
React-komponenterne.app/entry.server.jsx
er det første stykke kode, der kører, når en anmodning rammer serveren. Denne fil omdanner vores React-app til en streng/stream og sender den som vores svar til klienten.app/root.jsx
er der, hvor rodkomponenten skal hen.app/routes/
er der, hvor alle dine rutemoduler skal hen, remix bruger en filsystem-baseret routing.offentlig
mappen er der, hvor dine statiske aktiver placeres (billeder/fonts/etc.).remix.config.js
er der, hvor remix-konfigurationen kan indstilles.Lad os tjekke en login.jsx
ruteeksempel inde i en Remix-app:
import { redirect, json, Form, useActionData, useTransition } from 'remix';
import { isLoggedIn, verifyLogin } from '../auth';
export const loader = async ({ request }) => {
if (await isLoggedIn(request)) {
return redirect('/dashboard');
}
return json({ success: true });
};
export const action = async ({ request }) => {
const formData = await request.formData();
const values = {
email: formData.get('email') ?? '',
password: formData.get('password') ?? '',
};
const errors = await verifyLogin(values);
if (errors) {
return json({ errors }, { status: 400 });
}
return redirect('/dashboard');
};
export default function LoginRoute() {
const actionData = useActionData();
const transition = useTransition();
const isSubmitting = transition.state === 'submitting';
return (
Email
{actionData?.errors?.email &&
{actionData.errors.email}
}
<div>
<label htmlFor="password">Password</label>
<input id="password" name="password" type="password" />
{actionData?.errors?.password && (
<div>{actionData.errors.password}</div>
)}
</div>
<div>
<button type="submit" disabled={isSubmitting}>
{`Login ${isSubmitting ? '...' : ''}`}
</button>
</div>
</Form>
);
}
```
Det første, der sker her, er læsser
funktion, der kontrollerer, om brugeren allerede er logget ind med erLoggetInd
funktion og vil omdirigere
ham til /dashboard
rute, hvis ikke vil den blot returnere en { succes: true }
svar, så bliver login-siden gengivet.
Den LoginRoute
gengiver en formular med en e-mail- og adgangskodeindgang og en send-knap, som du kan se, er der ingen stat
variabler eller en onSubmit
i vores komponent, er det, fordi hver rute i remix kan eksportere en handling
og når en formular indsendes med en POST
metoden vil handlingen blive kaldt og vil håndtere den pågældende begivenhed.
Når formularen bliver sendt, vil handling
funktion vil få den
FormData fra Anmodning objekt const formData = await request.formData()
, så er vi ved at konstruere værdier
objekt med en e-mail og adgangskodeegenskaber, kan formData.get('e-mail')
vil lede efter det første matchende felt i vores formular med en name="e-mail"
og returnere dens værdi. Vi kontrollerer, om legitimationsoplysningerne er korrekte med verifyLogin
funktion, her kan du bruge et hvilket som helst af dine foretrukne JS-skemavalideringsbiblioteker og lave en Hent
til din brugerdefinerede backend for at tjekke, om login-dataene er korrekte. omdirigere
brugeren til /dashboard
rute, ellers returnerer vi en json
svar med fejlobjektet og en HTTP-statuskode 400
, den useActionData
hook returnerer dette fejlobjekt, hvis der er nogen, og vi gengiver betinget fejlmeddelelsen som i {actionData?.errors?.email && <div>{actionData.errors.email}</div>}
.
Den brug Overgang
hook fortæller os alt om sidens overgangstilstand, med isSubmitting
variabel kontrollerer vi, hvornår der sker en indsendelse, hvis der er nogen, vil vi deaktivere
Send-knappen og vis Login....
i stedet for Login
kunne vi også vise brugeren en indlæsningsspinner eller en anden indikation i stedet.
Den json
funktion er bare en genvej til at oprette applikation/json
svarobjekter. De useLoaderData
hook returnerer de JSON-parsede data fra din rute læsser
, den useActionData
returnerer ruten handling
analyserede data.
Hver rute kan også eksportere en meta
funktion, der er ansvarlig for at indstille metatags for dit Html-dokument, på denne måde kan du indstille en titel
og en beskrivelse
for hver rute og tilføj eventuelle Open Graph- eller andre metatags, du ønsker.
export const meta = () => {
const title = 'Min fantastiske side';
const description = 'Super fed side';
return {
charset: 'utf-8',
title,
description,
keywords: 'Remix,Awesome',
'twitter:image': 'https://awesome-page.com/awesome.png',
'twitter:card': 'summarylargeimage',
'twitter:creator': '@awesome',
'twitter:site': '@awesome',
'twitter:title': titel,
'twitter:description': beskrivelse,
};
};
export default function AwesomeRoute() {
return
Fantastisk rute
;
}
```
Vi har kun taget fat på toppen af isbjerget om Remix, der er så meget mere at vide, her er nogle nyttige links:
Det gode ved Remix er, at når du bliver bedre til det, bliver du også bedre til webfundamentet, og som du har set, peger mange af denne artikels links til Mozilla-dokumenterDet er det, der menes med, at Remix er fokuseret på webfundamentaliteter, det bruger web-API'er som Response- og Request-objektet til at give brugerne en fantastisk UX, og du kan stadig bruge alle dine React sædvanlige teknikker og yndlingsbiblioteker.
Vi har ikke talt om alle de fantastiske funktioner i Remix i denne artikel, f.eks. Indlejrede ruter, Grænser for fejl, Remix-stakke men alligevel burde denne artikel give dig en god idé om filosofien bag Remix.