Flask ile Jinja2’den React’e Ge\u00e7i\u015f: Ba\u015flang\u0131\u00e7 Seviyesi \u0130\u00e7in Kimlik Do\u011frulama ve Veri Ak\u0131\u015f\u0131 Anlay\u0131\u015f\u0131<\/p>\n
Flask ve Jinja2 ile olu\u015fturulmu\u015f web uygulamalar\u0131yla \u00e7al\u0131\u015f\u0131yorsan\u0131z, muhtemelen React gibi bir JavaScript \u00e7er\u00e7evesine ge\u00e7i\u015f yapmak i\u00e7in nedenleriniz vard\u0131r. React, daha etkile\u015fimli ve dinamik kullan\u0131c\u0131 deneyimleri sunabilir. Ancak bu ge\u00e7i\u015f s\u00fcrecinde, \u00f6zellikle kimlik do\u011frulama ve veri ak\u0131\u015f\u0131 gibi \u00f6nemli konularda zorluklarla kar\u015f\u0131la\u015fabilirsiniz. Bu makale, bu ge\u00e7i\u015fi anlamak ve sorunsuz bir \u015fekilde uygulamak i\u00e7in rehberlik sa\u011flayacakt\u0131r.<\/p>\n
## Flask ile Jinja2’den React’e Ge\u00e7i\u015f: Nedenleri ve Avantajlar\u0131<\/p>\n
Flask ve Jinja2, basit ve esneklikleriyle bilinen Python tabanl\u0131 web geli\u015ftirme ara\u00e7lar\u0131d\u0131r. Ancak, uygulaman\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fi, performans\u0131 ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan baz\u0131 s\u0131n\u0131rlamalar\u0131 vard\u0131r. React gibi bir JavaScript \u00e7er\u00e7evesi bu s\u0131n\u0131rlamalar\u0131 a\u015fabilir:<\/p>\n
* **Kullan\u0131c\u0131 Aray\u00fcz\u00fc Geli\u015ftirme:** React, bile\u015fen tabanl\u0131 bir mimariye sahiptir. Bu mimari, karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z bile\u015fenler olarak olu\u015fturmay\u0131 kolayla\u015ft\u0131r\u0131r ve uygulaman\u0131n s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r.
\n* **Performans:** React, sanal DOM (Document Object Model) ad\u0131 verilen bir teknoloji kullanarak web sayfalar\u0131n\u0131 daha verimli bir \u015fekilde g\u00fcnceller. Bu, performans\u0131 iyile\u015ftirmeye ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flamaya yard\u0131mc\u0131 olur.
\n* **Yeniden Kullan\u0131labilirlik:** React bile\u015fenleri, farkl\u0131 uygulamalarda yeniden kullan\u0131labilir ve bu da geli\u015ftirme s\u00fcresini k\u0131salt\u0131r ve kod tekrar\u0131n\u0131 azalt\u0131r.<\/p>\n
## Kimlik Do\u011frulama ve Veri Ak\u0131\u015f\u0131: Yeni Yakla\u015f\u0131mlar<\/p>\n
Flask’ta kimlik do\u011frulama, genellikle oturum y\u00f6netimi ve veritaban\u0131 ile etkile\u015fim kullanarak ger\u00e7ekle\u015ftirilir. React’te ise, bu i\u015flemler daha farkl\u0131 bir \u015fekilde ele al\u0131n\u0131r:<\/p>\n
* **Kimlik Do\u011frulama:** React, kullan\u0131c\u0131lar\u0131n kimlik bilgilerini do\u011frudan sunucudan almay\u0131 gerektirmez. Bunun yerine, JWT (JSON Web Token) gibi bir y\u00f6ntem kullanarak kullan\u0131c\u0131n\u0131n kimlik bilgilerini do\u011frulayabilir. Sunucudan JWT’yi alarak ve bunu istemcide depolayarak, uygulama, sunucudan tekrar istek g\u00f6ndermeden kullan\u0131c\u0131 kimli\u011fini belirleyebilir.
\n* **Veri Ak\u0131\u015f\u0131:** React, verileri sunucudan istemciye getirmek i\u00e7in API \u00e7a\u011fr\u0131lar\u0131 kullan\u0131r. Bu \u00e7a\u011fr\u0131lar, JSON format\u0131nda verileri al\u0131r ve uygulama durumunu g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
## Uygulama \u00d6rne\u011fi: React ile JWT Kimlik Do\u011frulamas\u0131<\/p>\n
**1. Sunucu Yap\u0131land\u0131rmas\u0131 (Node.js ile Express):**<\/p>\n
“`javascript
\nconst express = require(‘express’);
\nconst jwt = require(‘jsonwebtoken’);
\nconst app = express();
\nconst port = 3000;<\/p>\n
const secretKey = ‘your_secret_key’;<\/p>\n
app.post(‘\/login’, (req, res) => {
\n const { username, password } = req.body;
\n \/\/ Kullan\u0131c\u0131 ad\u0131 ve \u015fifre do\u011frulama i\u015flemi<\/p>\n
if (\/\/ do\u011frulama ba\u015far\u0131l\u0131) {
\n const token = jwt.sign({ username }, secretKey);
\n res.json({ token });
\n } else {
\n res.status(401).json({ message: ‘Ge\u00e7ersiz kimlik bilgileri’ });
\n }
\n});<\/p>\n
app.listen(port, () => {
\n console.log(`Sunucu ${port} portunda \u00e7al\u0131\u015f\u0131yor`);
\n});
\n“`<\/p>\n
**2. \u0130stemci Yap\u0131land\u0131rmas\u0131 (React):**<\/p>\n
“`javascript
\nimport React, { useState, useEffect } from ‘react’;
\nimport axios from ‘axios’;<\/p>\n
function App() {
\n const [token, setToken] = useState(null);<\/p>\n
useEffect(() => {
\n const storedToken = localStorage.getItem(‘token’);
\n if (storedToken) {
\n setToken(storedToken);
\n }
\n }, []);<\/p>\n
const handleLogin = async (username, password) => {
\n try {
\n const response = await axios.post(‘\/login’, { username, password });
\n localStorage.setItem(‘token’, response.data.token);
\n setToken(response.data.token);
\n } catch (error) {
\n console.error(‘Giri\u015f hatas\u0131:’, error);
\n }
\n };<\/p>\n
return (<\/p>\n
Giri\u015f yap\u0131ld\u0131: {token}<\/p>\n
) : (<\/p>\n