I am trying to test my Vue.js app authentication.
Assume, a user log in and to go to his profile the link would look like this.
https://website.com/profile/1
He can get to his page but what if he is a hacker and if he tried to type
https://website.com/profile/2
which will go to the profile of another person.
How can I redirect this hacker to the login page if he tried to go to a URL that does not belong to his profile?
Right now, I can stop him from viewing another people profile but still, he is still in the profile link even if he typed
https://website.com/profile/2
What I am trying to accomplish is that if users type a link that does not belong to his or her but which is valuable to other people it will redirect to the login page.
I am not storing User Data on the client side.
Firstly, you have to assume that the user is able to manipulate the webpage in any way and access all data stored on the client side. So you should not be storing sensitive data on the client that you do not want the user to access. (You may not be doing this, but I thought I should point it out.)
I assume you have a Profile component. You can use Vue Router navigation guards to authorize the transition and abort or redirect it if it is disallowed.
If the user is logged in then you are probably storing information about the logged in user on the client. You can use this to check if the profile page being visited belongs to the logged in user.
In your Profile component:
beforeRouteEnter(to, from, next) {
if (!loggedInUser) {
// User not logged in
next('/')
} else if (loggedInUser.id !== to.params.userId) {
// User is accessing profile page of another user, redirect
// to their profile page instead
next({ params: { userId: loggedInUser.id } })
} else {
next()
}
}
This is just an example of what you can do, I can't give a specific answer without knowing exactly how your app works.
Related
I have a vue.js app that makes API requests with axios and passes some authorization token in the request headers. If authorization token expires within some time period API calls fail with code 401 and my app shows login page where the user enters login and password and thus the app gets a new authorization token and continue to work.
Probably there is a better solution, but currently my idea is to handle authorization token expiration in this way: if I get 401 error I completely reset the app (including its state and, what is more important, all axios requests that still are in progress) then I show login page and reinitialize the app when the user presses 'login' button. To implement this scenario I need a way to immediately interrupt all the current app activity as if the page is reset by user with F5 button. Is it possible and is it a good idea to do this?
EDIT1: what if I do window.location.reload()?
First thing first: The approach you are thinking of (reloading the entire page) just to reset your app to the initial state and redirect the user to the Login page is WRONG.
You have multiple alternatives to handle your problem (token expiry/unauthorized access to your app)
Implement a refresh token functionality, so whenever you face situations of token expiry you refresh user token internally without the user having to worry or even know about it, or
if the token is not refreshable (or you don't want such functionality) then just clear out user's info from wherever you are saving it (Localstorage or only in the vuex store) and redirects the user using router.push() back to Login page.
expanding on #LinusBrog answer in this post you can also extract the initial data outside the original state in a function, and then use that same function for first time initialization of your state and then later, in token expiry case when you want to reset it, and then again redirecting the user to your Login route using router.push() method.
In both (2) and (3) you would also need to implement route guards which, in the absence of a token, will not allow the user to go inside your application, and will always redirect him back to login.
an example route guard could be:
routes: [
{
path: '/login',
name: 'Login',
beforeEnter: guardRoute,
component: Login
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
beforeEnter: guardUserRoute,
}
]
function guardAdminRoute (to, from, next) {
// get your token here either from localstorage or Vuex store
if (!auth.token) {
next({
name: 'Login',
query: { redirect: to.fullPath }
})
} else {
next()
}
}
Now, for the cancelation of all your Axios requests, Axios support cancellation of requests since v0.15. here is a nice documentation for it.
And yes, answering your edited question, as a quick ugly hack, you can use window.location.reload() function to reload your app but then again you would need to redirect the user to the Login route.
Let us say the user is on the Settings page but goes away from the keyboard for a while.
Technically the user is not authenticated but is able to "surf" his/her settings page until the user hits a page where some new data from the server is requested.
Currently, I just catch the "Unauthenticated" response and reload the page so the user gets to /login.
I'm using Laravel, but the setting page is based on Vue + Vue router. The setting is thus a single page but acts as it has many.
So how do you handle this kind of situation? Are you checking the authentication status like every 1 minute?
I like to build a to do list for multi company on one server. I build a to do list, but now I like to "scale" to app to different "sub servers"
I like to explain it by this example
Start: example.com - There is a login button. When you enter your account you are redirect to a subdomain
company1.example.com Here is the to do list for company 1. This company uses his own database for example mongodb://localhost:27017/compagny1
When I direct go to company1.example.com without a login I will be redirected to example.com
I this possible or is there a other way to set user and database for meteor. I don't like to have multi servers for example: localhost:3001 localhost:3002 etc
Thank you for giving me a direction for this question
I would do something similar:
add user field to store company name.
(eg. user.company = company1)
use iron router and put a onBeforeAction to the page that user is redirected after login
onBeforeAction: function (pause) {
if (Meteor.user()) { // only if user is logged in
var comp = Meteor.user().company
if(comp == 'company1'){
this.render('company1'); // will render example.com/company1 if setup
}
// pause this rendering of the rest of the before hooks and the action function
pause();
}
},
Update: i do not think many databases would be great. I better recomend making separate collections for each companys todos and subscribe them individually.
I have implemented a Facebook, Twitter and Google plus login to my website. For Facebook and Twitter the user needs to give permission to the app one time, unless i make a change in the required information.
Google Plus however asks for permission for my app every single time. And I can not find anywhere to configure the app in only requesting this once.
You need to set the 'approvalprompt' to 'auto'
function render() {
gapi.signin.render('customBtn', {
//'callback': 'signinCallback',
'clientid': '841077041629.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login'
'approvalprompt': 'auto'
});
}
Remove the approvalprompt parameter from your sign-in code. I assume you copied from one of the examples that uses this parameter to ensure that the example is always in a new state.
So i've been trying to get FB Connect working on my site, simply for login and authentication, using the Javascript SDK and following the code at:
https://developers.facebook.com/docs/guides/web/
So the button appears, i click it, a dialog pops up, i click that, presumably my site now has permission to know who i am...
Then what? The guide goes on to saying all the stuff I can access through the Facebook API, all the cool things about permissions, but presumably i need the user's ID or access token or something to get at this stuff. How is that given to me? left as a attribute on one of the elements? Left in a Javascript variable somewhere? Given as an argument to some callback? Thrown high into the heavens for me to receive via satellite downlink?
This is probably incredibly simple, but for the life of me i have not been able to figure it out. Facebook's tutorials have failed me, and so has Google. I want to get this in the Javascript, so I can immediately fill in form-data using the user's Facebook name, put a picture, etc. etc., and presumably send this all back to the server so the server can validate with Facebook that the data is real.
I'm assuming you're using the Login button? https://developers.facebook.com/docs/reference/plugins/login/
If you simply want form info, check out the registration plugin - https://developers.facebook.com/docs/plugins/registration/
However, to answer your question, make an API call to /me. For example:
FB.api('/me', function(user) {
if(user != null) {
// The user object now contains info about the logged in user
}
});
You should subscribe to the auth.login event and wrap the above API call in the successful response, i.e.:
FB.Event.subscribe('auth.login', function() {
// JS to run if when the user logs in, for example, the code snippet above
});