Click here to Skip to main content
14,661,186 members
Rate this:
Please Sign up or sign in to vote.
I'm using vue-cli and I'm trying to figure out how I can prevent the app from going to login when a user hits refresh, I just want the page to be the same it was before refresh was hit.

Any help would be great, thanks!

What I have tried:

I tried using Windows.sessionStorage
In my login:
if(this.input.username == res.data.name && this.input.password == res.data.password) {
              sessionStorage.setItem("authenticated", true)

Then I used a navigation guard:
routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      props: true,
       beforeEnter: (to, from, next) => {
       //  got to Login if not authenticated
      if (sessionStorage.getItem === null) next({ name: 'Login' })
       else next() // else go to the route
       }
    },

but when I hit refresh I was still brought back to login even though there was a sessionStorage visible.
Posted
Updated 10-Sep-20 5:23am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

I presume you have a database, somewhere, to access and test the original login.

If you could add in php then you could store a uid/key pair in a $_SESSION variable. Check the UID/KEY for every page open that you wish to secure - and also modify/update the key after each test. You could then even add a time stamp and expire a login after some appropriate amount of time. The key is just a random string. The uid could be hashed and that stored instead of their ID.

SELECT COUNT(*) from WhoIsLoggedInTable where uid='blahblah' and key='random something' and time-difference-functin(minutes, time-stamp-field, database-datetime-function) > expired-minutes
count > 0 and they're still logged in (update table accordingly).

Note that by not relying on any kind of window function it works on any browser and any O/S. There are a bunch of them out there and actively in use these days
   
v2
Comments
ynjay 10-Sep-20 12:32pm
   
Thanks so much! I am using a database which has the username and password saved.

I'm not very familiar with using php but do you know if there are similar implementations of the php for vue?

The way the app is set up, only the login page can be viewed by non logged in users. Everything else is secured but I want a logged in user to stay on the page they are on even if they refresh, without losing the data on the page.

I did look into a vue plugin that uses session storage, not sure if that's a workaround to using Windows at all.
W Balboos, GHB 10-Sep-20 12:43pm
   
I don't use vue or know anything about it. I use straight javaScript and straight php (HTML5, CSS3) - in other words, I'm independent of the whims of those who build these frameworks. You can pick up PHP pretty quickly at W3Schools if you don't already know it.

It (like javaScript and so much else) like 'C' - and even shares a lot of the same name functionality. I'll give you one heads=up to be very careful about.

If you start a PHP session, the session_start() must be the absolutely first thing on the first line - once other "headers" are sent you cannot start it (you'll get an error). Start the session on every page you wish to be aware of the values.

Finally - if you think all is well, mark the question as answered so it doesn't distract helpers from helping others.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100