Is there a way to prevent redirection to the homepage after submitting a login form?

Having trouble with my Single Page application: every time I refresh the page after rendering the login form, it goes back to the homepage. How can I prevent this and make sure the page stays on the login form even after a refresh?

This is what my homepage looks like:

<template id="" v-if="page.homepage">
      <div class="container ">
       <h1> Homepage </h1>
  </div>
</template>

This is my login form:

  <template id="" v-if="page.login">
              <div class="container ">
               <h1> Login </h1>
          </div>
        </template>

Here is the method I'm using:

loginButton(){
   this.page.homepage = false
   this.page.login = true
}

I've been struggling with this issue for quite some time now, any help would be greatly appreciated.

javascriptvue.jsvuejs2single-page-application

Answer №1

To enhance your Vue.js application's navigation, you can implement router guards with vue-router.

An example of using beforeEach for navigation control:

router.beforeEach((to, from, next) => {
  const authenticated = !!localStorage.getItem('token')

  if (['login'].includes(to.name) && authenticated) {
    next({ path: 'home' })
  } else if (['home'].includes(to.name) && !authenticated) {
    next({ path: '/login' })
  } else {
    next()
  }

})

Note: The above example demonstrates the use of a stored token to determine whether a user is logged in or not.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic image swapping using JSON key in Angular

Trying to display different icons based on a property that contains specific words. If the property includes "Health Care" or "Health Care .....", I want to show one image, otherwise another. I've tried using ng-show but my syntax seems off. Any sugge ...

javascripthtmlangularjsjsonimage

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

I have a div with an image inside of it, and the overflow of the div is set to hidden so that the image will be cropped if it exceeds the width or height. It was working correctly, but sometimes it doesn't. What could be causing this issue? Here is th ...

javascriptjqueryhtmlcss

Scroll the content of a div to the bottom using JavaScript

I'm facing a situation with my code: function scrollme(){ dh=document.body.scrollHeight ch=document.body.clientHeight if(dh>ch){ moveme=dh-ch window.scrollTo(0,moveme) } } However, I am looking for a way to make it scroll only within a specific d ...

javascripthtmlscroll

Steps for implementing drag-and-drop feature for a div in a template

I am looking to implement draggable functionality on a div element dynamically. The unique id for the div is generated using the code snippet below: var Exp=0; view.renderFunction = function(id1){ var id= id1 + Exp++; $("#"+id).draggable(); }; In my ...

javascriptjqueryjquery-uidrag-and-drop

Combining Objects in Three.js: Merge All Objects into a Single Entity

I am new to the world of three.js and recently I tried my hand at creating a custom shape using multiple objects. However, I encountered an issue where everything seemed fine when I added each object individually to the scene. https://i.sstatic.net/MWLYS. ...

javascriptmergethree.js

Looking for subsequence in dropdown choices with no assigned values

I need assistance with searching for a specific substring within text that is fetched from options generated by MySQL. How can I retrieve the selected option's text value in order to search for my desired substring? $(document).ready(function() { ...

javascriptphphtml

Create a Vue slot layout that mirrors the structure of Material UI

This is the code I have been working on: <tr :key="index" v-for="(item, index) in items"> <td v-for="header in headers" :key="header.value"> {{ item[header.value] }} </td> <td> & ...

javascriptvue.jsmaterial-uivue-slot

Creating toggling elements in Vue.js using dynamic v-show based on index and leveraging falsey v-if

What is the most effective way to use v-show for toggling elements based on their index? I have been able to toggle the elements, but when you click on the element that is already open, it does not close. <div v-for="(btn, index) in dataArray"> ...

javascriptvue.jsvuejs2

What can be done to ensure that the value from a promise is retained and available for use in

Currently, I am executing a database query and then manipulating the data to obtain a single numeric value. This value is essential for use in a subsequent array. The current definition of the array appears as follows (see below). The issue at hand is tha ...

javascript

Encountering issues with link functionality on homepage due to React-Router v6 and Material-UI Tab integration

I'm currently working on a homepage that requires different page links. Below you can find the necessary code snippet for setting up the tabs and routes for each page: <li> The tabs are located here - <Link to="/demo">D ...

javascriptreactjsreact-routermaterial-uireact-router-dom

Parallel Execution Issue with RxJS Observable forkJoin

Struggling to understand why my requests aren't executing concurrently with the following code. As a newcomer to RxJS and observables, I would greatly appreciate any guidance on improving this snippet below. Essentially, I am fetching data from a REST ...

javascriptangulartypescriptrxjsrxjs-observables

NextJS - Accessing local files with readdir and readFile functions leads to error: Module not found when trying to resolve 'fs' module

I have been working with NextJS and have successfully used the getStaticProps functionality in previous projects to populate data. However, I recently set up a new NextJS project and it seems that this functionality is no longer working. When starting th ...

javascriptnext.jsfsreadfile

This function named error is implemented in native code

My website is built in C# using asp.net. When the Onchange() event is triggered on the Dropdownlist, I call this jQuery function which displays an error: function error(){[native code]} <script type="text/javascript"> function GetDescription ...

javascriptc#jqueryasp.net

React and Express are incompatible due to the error message "TypeError: undefined is not a function

I am attempting to display the data from this array on my website using react and express: [{"LocationName":"LIBERTY DOGS","Address":"105 Greenwood Ave N, Seattle WA","Available":"Y"},{"LocationName":"FREEDOM DOGS","Address":"105 Greenwood Ave N, Seattle ...

javascriptsqlreactjsexpress

What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamli ...

javascriptjqueryhtmlcss

Fill in the username and password on the login page of the website when it is accessed through the mobile application

Currently, I have a Joomla website and mobile App that are hosted on different servers. Both are owned by the same party, and users have accounts on both platforms with identical ID's and passwords (even though they are stored in separate databases, w ...

javascriptphpajaxjoomlaauthentication

C# variable value not being retrieved by jQuery

When I implemented the jQuery scripts in my .aspx file, everything worked perfectly. Here is the code snippet: $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C+ ...

c#javascriptjqueryasp.netasp.net-ajax

Using v-bind to pass props to the <nuxt> component in Nuxt.js

I recently completed a nuxt.js project where I encountered an issue with passing data to a component. In my initial Vue file, I included the following code: <nuxt v-bind:cur-language="curLanguage"/> Within a different Vue file placed in the designa ...

vue.jsnuxt.js

"Enhance your website with the powerful autocompletion feature of

I am using Zend Framework to create a form element that utilizes Zend_Dojo_Form_Element_ComboBox. By setting dojox.data.QueryReadStore as the store type, I am able to generate a list of selectable values in my HTML input field. This allows me to either cho ...

phpjavascriptajaxzend-frameworkdojo

jquery mouse event does not register on touch-based devices

I have a mouse move event set up to scroll a div. However, when I try to access the functionality using a tab it does not work. How can I integrate this functionality onto a touch device? $(document).ready(function(){ $('#tim').on('mous ...

javascriptjquerytouch