How to protect admin routes with Vue.js?
I've been using the localStorage to store the JWT token and do the authentication, it works fine because the backend is protected, what is not, are the front end pages in Vue.js and its components, anyone can create a false token in the browser and access the pages, the panel menu, but the data is not loaded because the token is invalidated by the backend. Did you realize that the user will be able to navigate the pages normally? How can I avoid this? Only allowing back-end validated users to navigate the site.
I'm using Vuex and I can not think of a solution. The isLogged state receives the localStorage token, so the user can easily circumvent the browser.
I thought of a solution, do not judge me. Before entering each route, send a request to the back end to check the token, if false, remove the localStorage, would this be a good one?
vue.js
asked Nov 20 at 14:08
viniciussvl
1357
add a comment |
I've been using the localStorage to store the JWT token and do the authentication, it works fine because the backend is protected, what is not, are the front end pages in Vue.js and its components, anyone can create a false token in the browser and access the pages, the panel menu, but the data is not loaded because the token is invalidated by the backend. Did you realize that the user will be able to navigate the pages normally? How can I avoid this? Only allowing back-end validated users to navigate the site.
I'm using Vuex and I can not think of a solution. The isLogged state receives the localStorage token, so the user can easily circumvent the browser.
I thought of a solution, do not judge me. Before entering each route, send a request to the back end to check the token, if false, remove the localStorage, would this be a good one?
vue.js
asked Nov 20 at 14:08
viniciussvl
1357
add a comment |
I've been using the localStorage to store the JWT token and do the authentication, it works fine because the backend is protected, what is not, are the front end pages in Vue.js and its components, anyone can create a false token in the browser and access the pages, the panel menu, but the data is not loaded because the token is invalidated by the backend. Did you realize that the user will be able to navigate the pages normally? How can I avoid this? Only allowing back-end validated users to navigate the site.
I'm using Vuex and I can not think of a solution. The isLogged state receives the localStorage token, so the user can easily circumvent the browser.
I thought of a solution, do not judge me. Before entering each route, send a request to the back end to check the token, if false, remove the localStorage, would this be a good one?
vue.js
asked Nov 20 at 14:08
viniciussvl
1357
I've been using the localStorage to store the JWT token and do the authentication, it works fine because the backend is protected, what is not, are the front end pages in Vue.js and its components, anyone can create a false token in the browser and access the pages, the panel menu, but the data is not loaded because the token is invalidated by the backend. Did you realize that the user will be able to navigate the pages normally? How can I avoid this? Only allowing back-end validated users to navigate the site.
I'm using Vuex and I can not think of a solution. The isLogged state receives the localStorage token, so the user can easily circumvent the browser.
I thought of a solution, do not judge me. Before entering each route, send a request to the back end to check the token, if false, remove the localStorage, would this be a good one?
vue.js
vue.js
asked Nov 20 at 14:08
viniciussvl
1357
asked Nov 20 at 14:08
viniciussvl
1357
asked Nov 20 at 14:08
viniciussvl
1357
asked Nov 20 at 14:08
viniciussvl
1357
asked Nov 20 at 14:08
viniciussvl
1357
1357
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I'd say your solution is a pretty decent one to start with, but I think you can improve it a bit.
Because you're using VueX, what you could do is store the user (or some other variable) in the Vuex Store. Then before each route you can check if the Store has a user.
If the Store doesn't have a user, check if the localStorage has a token. If there is no token, then the user is not authorised to go to the route.
If the localStorage does have a token, call the back-end and check if the token is valid. If the token is valid, store the user in the Vuex Store and continue. If the token is not valid, than the user is not authorised to go to the route.
This will prevent you from creating unnecessary calls to the back-end whilst still having the validation.
answered Nov 20 at 14:20
T. Dirks
1,009318
Nice solution! One question, when the user refreshes on the page the Vuex Store resets the variables?
– viniciussvl
Nov 20 at 14:23
1
Yes but paragraph 3 and 4 cover for that
– Imre_G
Nov 20 at 14:40
Thank you, my friend! Another question from a newbie haha, can the Vuex Store be manipulated by the browser? Ex: change isLogged state for true
– viniciussvl
Nov 20 at 14:48
1
@viniciussvl the Vuex store can never be manipulated by any user (even in development mode) (according to my own experience). The Vuex Store can only be changed by methods and calls within the application itself, so only pre-defined methods.
– T. Dirks
Nov 20 at 15:13
1
Correct, mutations can only be called in the pre-defined code. Once the application enters the browser, you can't do anything to change the Vuex Store manually
– T. Dirks
Nov 20 at 15:16
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53394854%2fhow-to-protect-admin-routes-with-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I'd say your solution is a pretty decent one to start with, but I think you can improve it a bit.
Because you're using VueX, what you could do is store the user (or some other variable) in the Vuex Store. Then before each route you can check if the Store has a user.
If the Store doesn't have a user, check if the localStorage has a token. If there is no token, then the user is not authorised to go to the route.
If the localStorage does have a token, call the back-end and check if the token is valid. If the token is valid, store the user in the Vuex Store and continue. If the token is not valid, than the user is not authorised to go to the route.
This will prevent you from creating unnecessary calls to the back-end whilst still having the validation.
answered Nov 20 at 14:20
T. Dirks
1,009318
Nice solution! One question, when the user refreshes on the page the Vuex Store resets the variables?
– viniciussvl
Nov 20 at 14:23
1
Yes but paragraph 3 and 4 cover for that
– Imre_G
Nov 20 at 14:40
Thank you, my friend! Another question from a newbie haha, can the Vuex Store be manipulated by the browser? Ex: change isLogged state for true
– viniciussvl
Nov 20 at 14:48
1
@viniciussvl the Vuex store can never be manipulated by any user (even in development mode) (according to my own experience). The Vuex Store can only be changed by methods and calls within the application itself, so only pre-defined methods.
– T. Dirks
Nov 20 at 15:13
1
Correct, mutations can only be called in the pre-defined code. Once the application enters the browser, you can't do anything to change the Vuex Store manually
– T. Dirks
Nov 20 at 15:16
|
show 2 more comments
I'd say your solution is a pretty decent one to start with, but I think you can improve it a bit.
Because you're using VueX, what you could do is store the user (or some other variable) in the Vuex Store. Then before each route you can check if the Store has a user.
If the Store doesn't have a user, check if the localStorage has a token. If there is no token, then the user is not authorised to go to the route.
If the localStorage does have a token, call the back-end and check if the token is valid. If the token is valid, store the user in the Vuex Store and continue. If the token is not valid, than the user is not authorised to go to the route.
This will prevent you from creating unnecessary calls to the back-end whilst still having the validation.
answered Nov 20 at 14:20
T. Dirks
1,009318
Nice solution! One question, when the user refreshes on the page the Vuex Store resets the variables?
– viniciussvl
Nov 20 at 14:23
1
Yes but paragraph 3 and 4 cover for that
– Imre_G
Nov 20 at 14:40
Thank you, my friend! Another question from a newbie haha, can the Vuex Store be manipulated by the browser? Ex: change isLogged state for true
– viniciussvl
Nov 20 at 14:48
1
@viniciussvl the Vuex store can never be manipulated by any user (even in development mode) (according to my own experience). The Vuex Store can only be changed by methods and calls within the application itself, so only pre-defined methods.
– T. Dirks
Nov 20 at 15:13
1
Correct, mutations can only be called in the pre-defined code. Once the application enters the browser, you can't do anything to change the Vuex Store manually
– T. Dirks
Nov 20 at 15:16
|
show 2 more comments
I'd say your solution is a pretty decent one to start with, but I think you can improve it a bit.
Because you're using VueX, what you could do is store the user (or some other variable) in the Vuex Store. Then before each route you can check if the Store has a user.
If the Store doesn't have a user, check if the localStorage has a token. If there is no token, then the user is not authorised to go to the route.
If the localStorage does have a token, call the back-end and check if the token is valid. If the token is valid, store the user in the Vuex Store and continue. If the token is not valid, than the user is not authorised to go to the route.
This will prevent you from creating unnecessary calls to the back-end whilst still having the validation.
answered Nov 20 at 14:20
T. Dirks
1,009318
I'd say your solution is a pretty decent one to start with, but I think you can improve it a bit.
Because you're using VueX, what you could do is store the user (or some other variable) in the Vuex Store. Then before each route you can check if the Store has a user.
If the Store doesn't have a user, check if the localStorage has a token. If there is no token, then the user is not authorised to go to the route.
If the localStorage does have a token, call the back-end and check if the token is valid. If the token is valid, store the user in the Vuex Store and continue. If the token is not valid, than the user is not authorised to go to the route.
This will prevent you from creating unnecessary calls to the back-end whilst still having the validation.
answered Nov 20 at 14:20
T. Dirks
1,009318
answered Nov 20 at 14:20
T. Dirks
1,009318
answered Nov 20 at 14:20
T. Dirks
1,009318
answered Nov 20 at 14:20
T. Dirks
1,009318
1,009318
Nice solution! One question, when the user refreshes on the page the Vuex Store resets the variables?
– viniciussvl
Nov 20 at 14:23
1
Yes but paragraph 3 and 4 cover for that
– Imre_G
Nov 20 at 14:40
Thank you, my friend! Another question from a newbie haha, can the Vuex Store be manipulated by the browser? Ex: change isLogged state for true
– viniciussvl
Nov 20 at 14:48
1
@viniciussvl the Vuex store can never be manipulated by any user (even in development mode) (according to my own experience). The Vuex Store can only be changed by methods and calls within the application itself, so only pre-defined methods.
– T. Dirks
Nov 20 at 15:13
1
Correct, mutations can only be called in the pre-defined code. Once the application enters the browser, you can't do anything to change the Vuex Store manually
– T. Dirks
Nov 20 at 15:16
|
show 2 more comments
Nice solution! One question, when the user refreshes on the page the Vuex Store resets the variables?
– viniciussvl
Nov 20 at 14:23
1
Yes but paragraph 3 and 4 cover for that
– Imre_G
Nov 20 at 14:40
Thank you, my friend! Another question from a newbie haha, can the Vuex Store be manipulated by the browser? Ex: change isLogged state for true
– viniciussvl
Nov 20 at 14:48
1
@viniciussvl the Vuex store can never be manipulated by any user (even in development mode) (according to my own experience). The Vuex Store can only be changed by methods and calls within the application itself, so only pre-defined methods.
– T. Dirks
Nov 20 at 15:13
1
Correct, mutations can only be called in the pre-defined code. Once the application enters the browser, you can't do anything to change the Vuex Store manually
– T. Dirks
Nov 20 at 15:16
Nice solution! One question, when the user refreshes on the page the Vuex Store resets the variables?
– viniciussvl
Nov 20 at 14:23
Nice solution! One question, when the user refreshes on the page the Vuex Store resets the variables?
– viniciussvl
Nov 20 at 14:23
1
1
Yes but paragraph 3 and 4 cover for that
– Imre_G
Nov 20 at 14:40
Yes but paragraph 3 and 4 cover for that
– Imre_G
Nov 20 at 14:40
Thank you, my friend! Another question from a newbie haha, can the Vuex Store be manipulated by the browser? Ex: change isLogged state for true
– viniciussvl
Nov 20 at 14:48
Thank you, my friend! Another question from a newbie haha, can the Vuex Store be manipulated by the browser? Ex: change isLogged state for true
– viniciussvl
Nov 20 at 14:48
1
1
@viniciussvl the Vuex store can never be manipulated by any user (even in development mode) (according to my own experience). The Vuex Store can only be changed by methods and calls within the application itself, so only pre-defined methods.
– T. Dirks
Nov 20 at 15:13
@viniciussvl the Vuex store can never be manipulated by any user (even in development mode) (according to my own experience). The Vuex Store can only be changed by methods and calls within the application itself, so only pre-defined methods.
– T. Dirks
Nov 20 at 15:13
1
1
Correct, mutations can only be called in the pre-defined code. Once the application enters the browser, you can't do anything to change the Vuex Store manually
– T. Dirks
Nov 20 at 15:16
Correct, mutations can only be called in the pre-defined code. Once the application enters the browser, you can't do anything to change the Vuex Store manually
– T. Dirks
Nov 20 at 15:16
|
show 2 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53394854%2fhow-to-protect-admin-routes-with-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
