Restrict Vue Router access to specific pages only

Once a user has logged in for the first time, they are directed to the CreateProfile page where they can enter their profile information. I want to restrict access to this page so that if the user manually types the URL into their browser (e.g. www.myproject.com/createProfile), they will be redirected and unable to access it.

How can I ensure that only redirection from the login page allows access to the CreateProfile page? If a user attempts to access it directly via URL, they should be redirected to a 404 error page.

The current route setup for CreateProfile is as follows:

{
  path: '/createprofile',
  name: 'CreateProfile',
  component: CreateProfile,
  beforeEnter: (to, from, next) => {
    if (store.getters.getUserStatus == true) {
      next()
    } else {
      next({ name: 'Login' })
    }
  }
}

Thank you!

Answer №1

To verify the previous route location, use the from route object within the beforeEnter navigation guard.

For instance, ensure that the from.name property is set to Login, indicating a successful redirect (assuming no <router-link> is present from Login):

beforeEnter: (to, from, next) => {
  const isRedirected = from.name === 'Login';
  if (isRedirected && store.getters.getUserStatus == true) {
    next()
  } else {
    next({ name: 'Login' })
  }
}

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

Tips for enabling autofocus in mat-select列表。

I am working on an angular project where I am using Angular Material and a mat-select element. In my form, the mat-select is the first element, and I want to set auto-focus on it when the page loads. However, I have been facing some difficulties achieving ...

Securing special characters in cshtml

I am working on a razor view which includes a hidden field called Model.Token. The Token contains special characters that are then appended to a link in the href attribute. <a href='http://<a href="/cdn-cgi/l/email-protection" class="__cf_email ...

Why do attributes of a directive fail to function within a different directive in AngularJS?

Trying to set attributes of the angularJS directive named ng-FitText within another angularJS directive called scroll-cards. Here's the approach I'm taking: In the code snippet below, the attribute data-fittest is being assigned from ng-FitText ...

Data from HTML not being transferred by Angular Forms

I am facing an issue with transferring input data from HTML's <select> element to Angular Forms. Let's take a look at my code first. File Name: home-page.component.html <form [formGroup]="rForm" (ngSubmit)="addPaste(rForm.value)"> ...

Listening for key combinations in VueJS using a mounted event listener

I am facing an issue with my global key listener - it only catches single key strokes. How can I modify it to capture combinations like ctrl+enter? mounted() { window.addEventListener ( "keypress", e => { console.log ...

When using EventBus in Vue.js with dynamic elements, the $off method removes event listeners for all reused components at once, rather

I am encountering an issue with a dynamically generated component that can be mounted multiple times on a page simultaneously. When there are 10 food items returned from a feed, there are 10 components created. Each FoodItem component has its own event bus ...

What is the best way to ensure that the value of a <textarea> in jQuery is consistently saved and reflected in the HTML document?

I have a function on my website that allows users to input text which is then displayed on the page. However, this text disappears when the page is reloaded and does not stay permanently. How can I use jQuery to make sure that the entered text remains on ...

Ways to receive alerts when a marker enters a polygon

Looking for a way to receive notifications if my marker enters any of the polygons on the map. Having trouble implementing it correctly, here is my current code: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com ...

Maintaining a JavaScript script within the local project directory and integrating it for use with Angular

I could use some assistance. I am currently working on an Angular project and making API calls (GET/PUT) to a remote server. In order to improve the performance of my application, I decided to store the necessary JS file locally in the assets folder. Init ...

Display a div using Jquery when hovering over it with several classes

I want to create a hover effect where div2 fades in slowly when hovering over div1 within the same container. However, my jQuery code doesn't seem to be working as expected... $(".div").hover(function() { $(this).find(".div2").animate({ opac ...

The regular expression in Vite / Vue is causing a SyntaxError

I've encountered an error in my new Vuejs project when I run the npm run dev command. Can anyone help me resolve this issue? I believe it may be an internal bug from Vite in the node_modules. My operating system is macOS Ventura 13.3.1. https://i.sst ...

Gain access to PowerBI reports effortlessly without the need to input any credentials

Seeking guidance on calling Power BI reports from an ASP.NET C# web application while passing credentials, specifically without utilizing Azure AD. Access has been granted to certain users in the Power BI Service workspace with view permissions. We aim t ...

Can you please explain why I am unable to remove the item in my code using Node.js and Express?

Currently, I am in the process of learning NodeJS and working on an application that involves adding Bicicleta objects. However, I have encountered an issue where I am unable to delete these objects successfully. Even though the POST request for deletion r ...

The functionality of Ajax loading content will fail when the link is already loaded

I am currently using an ajax script that dynamically replaces the content of #main with the contents of a loaded page based on the clicked link. For example, clicking on rddd would replace #main with the content of about.php. However, I encountered an is ...

Designing a personalized look for a property with Styled-System

Styled-System offers various props related to css grid: I have a suggestion for a new prop, gridWrap. My idea is to allow users to adjust the auto-fit value using the gridWrap prop. Here's the base CSS code: grid-template-columns: repeat(auto-fit, mi ...

Guide to adding sound effects to your Vue 3 app using the Composition API

I'm having trouble setting up a basic button click feature in Vue 3 Composition API to play a sound effect. In my setup function, I have imported an mp3 sound effect from the assets folder and passed it into a ref method with an HTMLAudioElement type, ...

How can I gather information from members who have already signed up?

I have a form that submits data to the Angular Firebase database. Once the form is submitted, I want to display the previously submitted data in the form if the user signs in again. Below is my .ts file: import { Component, OnInit } from '@angular/c ...

No control access origin header found on the request to Spring 5 WebFlux functional endpoints

I have scoured numerous resources in search of the perfect solution to my issue. In my opinion, I believe I have all the necessary components in place but I am unable to pinpoint where the problem lies. Utilizing spring 5 with WebFlux and functional endpo ...

Using anti-cache code in jQuery's getJson function

During an interview, I was presented with the following question: Can you provide a one-liner code showing the proper syntax to add an anti-cache code to all jQuery getJson calls in a project without individually adding it to each call? I must admit th ...

Ways to showcase title using ng-repeat

<input type="text" ng-model= "name" title="{{name}}">//this title displays the name that is contained in ng-model Similarly... <select title ="{{item.actionId}}" ng-model="item.actionId"> <option ng-repeat="action in actionList" value="{{ ...