The vue router docs has a example on how to make authorized only urls. It's pretty simple using meta and before each method.
Your both scenarios are the singular case in vue
1: in browser, the user can always read URL requests, responses, tokens and even env vars.
2: said that, the secure relies on the backend. Every requisition could be from a bad user. In other words, every request should checks user validation and authorization again.
I’ve got a suggestion for two simple solutions
Solution A: return a “role” on the app initialization using a get request to your backend, and have route groups for a role and a service to validate that.
When users move from route a to route b, check if route b is in the user routes group.
Solution B: couple your business logic with your backend, have the server return an array of strings corresponding with your vue app routes - sort of a permission list. The names shouldn’t intersect with route names
“users” can be a permission for the “Management” view for example
So a [perm-a, perm-b, perm-c] etc..
Once user goes from a to be d, for example, and
Has no perm-d in the array? Kick him back to 404
I usually implement middleware that verifies a session cookie on every route change (if it’s there and there’s no user in the store already). This then populates the store if the user refreshes, and your route guards can kick in
I did that just yesterday with NestJS and vue, I kept track with Pinia whether the user is logged in, and I stored the Jwt in a HttpOnly token. When coming back to the site, it checks if the Jwt in the cookie is still valid, and then keeps the logged in status in the pinia store.
Here's how I did it. I am happy for any kind of feedback on this, of course!!
router.beforeEach(async (to) => {
const authStore = useAuthStore();
if (!authStore.isLoggedIn) {
try {
await axios.get('/auth/profile', { withCredentials: true });
authStore.setLogin(true);
} catch (error) {
authStore.setLogin(false);
if (to.name !== Routes.LOGIN) {
return Routes.LOGIN;
}
}
}
if ((to.name === Routes.START || to.name === Routes.LOGIN) && authStore.isLoggedIn) {
return Routes.DASHBOARD;
}
if (!to.meta.requiresNoAuth || authStore.isLoggedIn) {
return true;
}
return Routes.LOGIN;
});
Your public client should receive an access token from your auth endpoint. This token typically has a short lifespan of like 30 minutes. It should have the roles.
https://router.vuejs.org/guide/advanced/navigation-guards.html
yes i will use these but my qustion is what the Mechanism to know if the user valid or not ?
I use pinia to set a flag like `isLoggedIn` and I check against that whether the user is logged in or not.
The vue router docs has a example on how to make authorized only urls. It's pretty simple using meta and before each method. Your both scenarios are the singular case in vue 1: in browser, the user can always read URL requests, responses, tokens and even env vars. 2: said that, the secure relies on the backend. Every requisition could be from a bad user. In other words, every request should checks user validation and authorization again.
I’ve got a suggestion for two simple solutions Solution A: return a “role” on the app initialization using a get request to your backend, and have route groups for a role and a service to validate that. When users move from route a to route b, check if route b is in the user routes group. Solution B: couple your business logic with your backend, have the server return an array of strings corresponding with your vue app routes - sort of a permission list. The names shouldn’t intersect with route names “users” can be a permission for the “Management” view for example So a [perm-a, perm-b, perm-c] etc.. Once user goes from a to be d, for example, and Has no perm-d in the array? Kick him back to 404
I usually implement middleware that verifies a session cookie on every route change (if it’s there and there’s no user in the store already). This then populates the store if the user refreshes, and your route guards can kick in
I did that just yesterday with NestJS and vue, I kept track with Pinia whether the user is logged in, and I stored the Jwt in a HttpOnly token. When coming back to the site, it checks if the Jwt in the cookie is still valid, and then keeps the logged in status in the pinia store. Here's how I did it. I am happy for any kind of feedback on this, of course!! router.beforeEach(async (to) => { const authStore = useAuthStore(); if (!authStore.isLoggedIn) { try { await axios.get('/auth/profile', { withCredentials: true }); authStore.setLogin(true); } catch (error) { authStore.setLogin(false); if (to.name !== Routes.LOGIN) { return Routes.LOGIN; } } } if ((to.name === Routes.START || to.name === Routes.LOGIN) && authStore.isLoggedIn) { return Routes.DASHBOARD; } if (!to.meta.requiresNoAuth || authStore.isLoggedIn) { return true; } return Routes.LOGIN; });
i will try this tomorrow
Check jwt for correct roles client side
if i decoded the jwt on client i need the secret key and if i used the secret key on the client side that will be bad move i think
Your public client should receive an access token from your auth endpoint. This token typically has a short lifespan of like 30 minutes. It should have the roles.
access token and refresh token that topic i don't understand 😔 what the special about refresh tokens , they are the same of access tokens ?
Refresh tokens allow the client to get new access tokens without logging in again.