Авторизация для приложения NextJS ⇐ Javascript

[Anonymous]

Я новичок в next.js, и я хочу интегрировать аутентификацию и авторизацию в моем приложении. К вашему сведению, структура проекта такая -< /p>

Код: Выделить всё

├── .next
├── node_modules
├── public
├── src
│   ├── Components
│   │   └── LandingPage
│   │   │   ├── LoginForm.jsx
│   │   │   └── LoginForm.module.css
│   │   └── DashBoard
│   │       ├── DashBoard.jsx
│   │       └── DashBoard.module.css
│   ├── pages
│   │   ├── index.jsx
│   │   ├── _app.jsx
│   │   ├── _document.jsx
│   │   └── dashboard
│   │       └── index.jsx
│   └── styles
│       └── globals.css
├── .env
├── .gitignore
├── eslint.config.mjs
├── jsconfig.json
├── next.config.mjs
├── package-lock.json
├── package.json
└── README.md
< /code>
и у меня есть два API для авторизации и аутентификации. Моя задача состоит в том, чтобы использовать токен JWT для аутентификации - идентификатор роли и сеанса для авторизации < /p>
Это ответ API от почтальника для входа в систему - < /p>
{
"success": true,
"message": "Logged in successfully",
"data": {
"access_token": "JWT token", //hiding actual token for security purpose
"user_info": {
"user_id": 1000,
"username": "pritam",
"role": "1000",
"last_login": "2025-04-28T10:35:59.578Z",
"created_at": "2024-12-18T09:19:29.000Z"
}
}
}
< /code>
Это ответ API от почты для сеанса с использованием токена носителя -< /p>
{
"success": true,
"message": "Session active.",
"sid": "E-lqAr78APRFyNDFPagBOnPkofwJeilZ",
"cookies": {
"parsed": {
"connect.sid": "s:E-lqAr78APRFyNDFPagBOnPkofwJeilZ.ZeRm/rjOjxerh/6x7ltsU980Fo5osr9VSWc2UoABnlk"
},
"raw": "connect.sid=s%3AE-lqAr78APRFyNDFPagBOnPkofwJeilZ.ZeRm%2FrjOjxerh%2F6x7ltsU980Fo5osr9VSWc2UoABnlk"
},
"data": {
"id": 1000,
"username": "pritam",
"role": "1000"
}
}
< /code>
Теперь я написал эту функцию для формы входа в систему отправить -< /p>
  const handleLogin = async () => {

try {
const payload = {
username: formData.username,
password: formData.password,
};

const res = await axios.post(
'http://localhost:3000/api/v1/login/superadmin',
payload,
{
headers: {
'Content-Type': 'application/json'
}
}
);

if(res.data.success) {
const { access_token, user_info } = res.data.data;
Cookies.set('access_token', access_token, { expires: 1, secure: true, sameSite: 'Strict' });
Cookies.set('role', user_info.role, { expires: 1, secure: true, sameSite: 'Strict' });

router.replace('/dashboard');
}
else {
toast.error('Login failed. Please check credentials.', {
position: 'top-right',
autoClose: 3000,
});
}

} catch (err) {
toast.error('Login failed. Please check credentials.', {
position: 'top-right',
autoClose: 3000,
});
}
};

Теперь я запланировал, что я создаю промежуточное программное обеспечение и каждый раз, когда реагирует маршрут на другой странице (кроме «/'этого маршрута, которая по умолчанию» в форме входа в систему), это запускает использование, которое будет подтверждать, если данные Cookie имеют правильную роль, которая является роли === 1000 & сеанс пользователя Login, действительны или нет. Если оба являются ложными, то автоматически направляются на страницу входа в систему (снова входите в систему для нового токена или роли, не разрешается доступа к веб -страницам), и если оба да разрешат только маршрут. Таким образом, мы можем защитить каждый маршрут в приложении. Теперь я сделал этот код _app.jsx для этой логики -< /p>
_App.jsx -< /p>
function MyApp({ Component, pageProps }) {
const router = useRouter();

useEffect(() => {
const checkSession = async () => {

// Skip session check on login page ('/')
if (router.pathname === '/') {
return;
}

const token = Cookies.get('access_token');
const role = Cookies.get('role');

// If token or role missing or invalid, redirect to login
if (!token || role !== '1000') {
router.replace('/');
toast.error('You do not have Authentication to access this page, Please Login First !!!', {
position: 'top-right',
autoClose: 4000,
});
return;
}

try {
console.log(token);
const res = await axios.get('http://localhost:3000/api/v1/check-session/superadmin', {
headers: {
Authorization: `Bearer ${token}`,
},
withCredentials: true
});

if (res.data.success) {
console.log("response",res);
Cookies.set('session_id', res.data.sid, { expires: 1, secure: true, sameSite: 'Strict' });
// router.replace('/dashboard');
} else {
toast.error('You do not have Authentication to access this page, Please Login First !!!', {
position: 'top-right',
autoClose: 4000,
});
router.replace('/');
}
} catch (error) {
toast.error('Network error !!! Please try again...', {
position: 'top-right',
autoClose: 2000,
});
router.replace('/');
}
};

checkSession();
}, [router.pathname]); // runs whenever route changes

return (




);
}
< /code>
Но это не работает. У меня ошибка cors, которая является это -

Доступ к Xmlhttprequest at
'http: // localhost: 3000/api/v1/check -session/superadmin' for inory
http: // localhost: 3030. Не проходит проверку управления доступом: значение заголовка
'ancrol-allow-wallow-origin в ответе не должно быть подстановочным знаком
, когда режим учетных данных запроса «включить».
режим учетных данных запросов, инициированный Xmlhttprequest,-это
controde-withcredentials. GET http://localhost:3000/api/v1/check-session/superadmin net::ERR_FAILED
< /code>
< /blockquote>
Я провел некоторые исследования и разработки об этом и обнаружил, что это общая проблема при работе с данными cookie для целей безопасности. Я внес изменения в код Backend Server.js, но все еще столкнулся с этой проблемой.app.use(cors('*'));
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
next();
});
< /code>
к этому> < /p>
app.use(cors({
origin: 'http://localhost:3030',
credentials: true,
}));

app.options('*', cors({
origin: 'http://localhost:3030',
credentials: true,
}));
< /code>
Но в конце концов я отказываюсь от этого и не могу исправить. Я не знаю, делаю ли я неправильную логику или есть что -то еще, о чем я не знаю. Кто -нибудь может мне помочь?

Подробнее здесь: https://stackoverflow.com/questions/795 ... pplication