Bueno, estoy un poco confundido, primero dices datos API, la otra oración dices página JSON ... sin embargo. Si desea proteger una PÁGINA, cree un middleware

middleware/auth.js

 export default async function ({ store, $axios, redirect }) { let valid = await $axios.$post('/api/checktoken') if (!valid) { redirect('/') } }

Debe crear una API donde verifique el token. Por lo general, debe colocar el token en su encabezado como Authentication: Bearer token... sin embargo, simplemente guardo mi token dentro de una cookie. Porque si envía una solicitud HTTP al servidor, las cookies se envían automáticamente, por lo que no necesito hacer ningún trabajo adicional.

El siguiente paso es ir a alguna página y configurar su autenticación de middleware.

página.vue

 <script> export default { middleware: "auth" } </script>

Sin embargo, si desea proteger algunas rutas de back-end, puede hacerlo así. Crear de nuevo un middleware

 async authenticate(req, res, next) { let token = await cookieService.getTokenFromCookie(req) if (!token) return errorService.resError(res, 400, 'Authorization failed') let tokenValid = await tokenService.verifyToken(token) if (!tokenValid) return errorService.resError(res, 400, 'Authorization failed') let decodedData = tokenService.decode(token) if (!decodedData) return errorService.resError(res, 400, 'Authorization failed') res.locals.userId = decodedData.userId res.locals.role = decodedData.role next() }

En este caso, básicamente necesita leer el token de su cookie. (en caso de que no use cookies, deberá leerlo de su encabezado, por lo que debe crear una función que lea su token del encabezado)

Compruebe si el token está incluso allí.

Verifique si el token es válido.

Decodifique el token para que pueda acceder a los datos que contiene.

Ahora también puede poner los datos en su res.locals . La ventaja es que estos datos se limitan a esta solicitud actual y puede acceder a ellos en el siguiente middleware/punto final.

luego llama a next() para pasar al siguiente middleware/punto final

 function endpoint(req, res) { let { userId, role } = res.locals do something.... }

Así que la ruta se parece a esto:

 app.use("/some/api/point", authenticate, endpoint)

Lo bueno es que puede authenticate en cada ruta API que desee proteger.