Learning Vue JS - Auto Logout
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- In this lesson, we are exploring how to systematically log a user out of our application using Vue. Let's start by adding some event listeners on the windows and then starting some timers. As events start rolling in, we will restart those timers until one of those expire. When they do, we will log the user out.
For the best experience, follow along in our interactive school at www.coderstape...
DigitalOcean Referral
m.do.co/c/7dce...
![PURPEECH - นี่ฉันเองคนที่... (It's me) [Official MV]](http://i.ytimg.com/vi/NuhHd0hOOg8/mqdefault.jpg)
Welcome back 💪
As for the "this" keyword it is another option to use arrow function :)
Nice tutorial though, thank you
I could not have asked for a better walk-trough and explanation of how to do this. You made it look so easy (and it was) and you are a really good presenter. Exactly what I was looking for. I implemented a snackbar for the warning for a bonus. Thank you!
I use laravel at work everyday, and honestly if I want to learn or understand new features, I always come to your channel :) you are the best
welp, this is a great surprise; I was just about to search your channel to finish the Laravel Collection series.
Love that series, was a lot of fun to put together
You are an amazing teacher!
Bro, you simplified this for me man. Great job. 👏👏👏
Miss your videos so much. This video again and again was helpful!
nice video, at 12:09 you can also use the es6 arrow function, it will bind `this` automatically. You don't have to pass `this` in that case.
example:
```
this.events.forEach(event => {
window.addEventListener(event, this.resetTimer);
})
```
I think I mentioned that on the video. We could use fat arrow functions to get the this binding but opted in to show the traditional way for learning purposes.
Good coding. Excellent explanation.
nice video. I hope you will make more videos :)
Super bien explicado, lo estaba buscando hace mucho tiempo muchas gracias.
Been a while since you uploaded, or at least I got a notification! It's going to be a series?
That's the plan
you save me in my project thnx from mexico
I prefer to create after warning a countdown to logout
Victor. Great content &great explanation.did you have plan to make course on machine learning.??
No offence, but your code is _vastly_ inefficient. Clearing and setting timeouts with every mouse move leads to timeout ID sky rocket. Also, I don't quite understand why you need two separate counters. You just measure inactivity time in both timers, so the timer itself could serve as that - an inactivity counter. Your warning and logout code should consume the counter instead of defining their own. The cleanest and most efficient solution to this problem is to store inactivity time somewhere and make it 0 if either of these events occur. Then, each tick would check if the inactivity is greater or equal the amount of time triggering warning or the logout.
Also, _click_ doesn't make any sense if you have mousedown and keydown. Either of these _always_ precedes the click.
Yeah
I totally agree. also timers have the side effect that they do not run when the tab in your browser is inactive. So to improve on the idea of a inactivity counter you should check against a timestamp when the events occur and calculate a deltatime to check against a threshold. In addition you need an check at the backend for a valid session cookie. Ideally it also provides the max activity time for the user, just to keep the configuration of your app save. As any kid in the school could easily change the javascript or disable it altogether.
But to get the concept along and show the versatility of components it's a great tutorial... just do not use it in production.
Mega Bub: Like to share a bit of code as to how you would go about this task?
Hey Vicktor Welcome back 😁
Thank you my boss!!!
Thank you for the tutorial, it's been a month since your last upload.
Very informative and easy to understand.
I have one question about the destroyed event, why we need to implement it in this scenario?
I don't think it will ever be called, since the component is always mounted and there is no event to remove it from the DOM.
Sorry for the bad English. 😅
It will be fired automatically when you navigate to the next page and Vue does the cleanup
Nice tutorial thank you!
Any idea if implementing a throttle is a good idea? 🤔
What a great video. Can u make make video about services and repositories in laravel - pros and cons. I have already watched your video about Repository pattern but it will be good if u have that type of lesson. Greetings! 👏
Excelent!!
Awesome! you are awesome man
good amingzing hahah
Would you make more any vue-laravel real life components in the future? I am at very beginning level with js and Vue, so it would be nice to have some simple real world examples.
Really nice tutor btw!
Is there any way to logout on all tabs?
Amazing!!
really nice , thank you
Can you show us the best way to authenticate using OAuth2 and JWT? Thank you!
Hi Victor! Do you also have vuex tutorials? Thanks
Very interesting, and how do with page visibility of html5?
he's back
But if a user disables javascript this wouldn't work
The same can be said about literary everything that uses Javascript. There's no fix for that
@@CodersTape That's true. Btw nice video as always 👌
Hey!!! great video, thanks for posting it, just an observation... isn't the listener for mousemove a lot of overhead? ... I mean, that event occurs absolutely all the time.
Yes I agree. In the real project, I actually used lodash to debounce the event to once a second.
@@CodersTape That sounds absolutely better. Thanks!!!
How can I get the theme you are using? Love it :)
Appliated much if you can make video auto logout integrated with JWT.
haha amingzing
Where are you brother, miss a lot...😢😢
Where can i find the full coding!!!!
Can you please do a toturial about ionic sir 😊🙏
brother are you continue Vue Js Learning course? I want to learn from this tutorial
Like without watching 😁
Keep going 💪
You the man, any new Udemy courses?
Soon
Bro when your Udemy course come?
Now I have a reason to hate you 😂
I HATE being logged out automatically.
It's a nessesary evil tho. 😉
Just another tool in the toolbox my friend