How to use sessionstorage to prevent refresh to login?

Question

0.00/5 (No votes)

See more:

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:

JavaScript

if(this.input.username == res.data.name && this.input.password == res.data.password) {
              sessionStorage.setItem("authenticated", true)

Then I used a navigation guard:

JavaScript

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 10-Sep-20 4:21am

ynjay

Updated 10-Sep-20 5:23am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

W∴ Balboos, *GHB* · Answer 1 · 2020-09-10T05:23:00

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.

SQL

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

Posted 10-Sep-20 5:23am

W∴ Balboos, GHB

Updated 10-Sep-20 5:25am

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.