The process of authenticating route parameters in Nuxt

I'm having trouble validating route parameters in my page component using the following code:

async validate({ params, store }) {
    await store.dispatch(types.VALIDATE_PARAMS_ASYNC, params.id)
}

And here's the corresponding code in the store:

async [types.VALIDATE_PARAMS_ASYNC]({state, commit, dispatch}, payload) {
    try {
        const res = await this.$axios.$post('/api/params/validate', {
            params: payload
        })
        commit(types.MUTATE_SET_INFO, res.data) // The mutation is located in another module and isn't working 
        return true
    } catch(e) {
        return false
    }
}

Despite implementing this logic, it doesn't seem to work as expected. Even with invalid parameters, the page still loads. Any ideas on what might be going wrong? Please assist!

Answer №1

Ensure that your validate function returns a boolean value:

async validate({ params, store }) {
    // Perform asynchronous operations here
   return true; // Return true if parameters are valid
   return false; // Returning false will prevent Nuxt.js from rendering the route and show an error page
}

Refer to the official documentation for more information: https://nuxtjs.org/api/pages-validate#the-validate-method


async validate({ params, store }) {
    return await store.dispatch(types.VALIDATE_PARAMS_ASYNC, params.id)
}

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

Leveraging ThemeProvider Parameters with Global Styled-Components

When working with styled-components, how can I access the props of the ThemeProvider in the context of global.js? For instance, in my theme.js file, I have ${props => props.theme.fonts.fontSize} set to a default font size of 16px. const theme = { ...

drag-n-drop Vue table with locked columns

I need a way to create a two-column table where the first column has a fixed list of values and the second column is draggable so that the cells can be moved up and down without affecting the first column. For example, I want to display a list of time slo ...

Testing JavaScript performance using the V8 engine

function add(x, y) { return x + y; } console.time("clock1"); for (var i = 0; i < 90000000; ++i) { add(1, 2); add('a','b'); } console.timeEnd("clock1"); function combineText(x, y) { return x + y; } fu ...

The issue at hand is the lack of execution for the Mocha Chai `.end()`

I have encountered an issue while trying to write a Mocha chai test for a Nodejs API that was previously tested using Supertest. Strangely, the test always passes even when I intentionally specify wrong expected parameters. Below is the code snippet of th ...

Is it possible to showcase two modals on a single page, positioning one to the left and the other to the right using Bootstrap?

Can someone help me learn how to display two modals on the same screen, one on the left and one on the right? I am new to bootstrap and would appreciate some guidance! ...

The word-break CSS property is ineffective in this situation

I've been experimenting with the word-break css property, but I just can't seem to get it to work even when using a simple example. Here's my code: React: render() { return ( <h5 className="word-break">A very very long line.... ...

What could be causing the delay in Express when transitioning between console logs while using AngularJS $http.get?

By utilizing Express, Node, and Angular, I incorporated an HTML button on my website that triggers a get request to Express. This request then executes a function that logs a predefined message to the console. Initially, when I click the button for the fir ...

Property computation being initiated before property initialization

I am encountering an issue in my Vue application where I am trying to filter an array received from map getters based on a type prop within a computed property. Despite verifying that both the array elements and the prop are strings, the filtering process ...

What is the best way to add custom text to the URL input field of the CKEditor image/link dialog?

Hey everyone, I've been working with CKEditor 4 on my project and I'm facing a challenge. I need to insert a string into the URL textfield in the image or link dialog window using JavaScript/jQuery. Here's where I'm stuck: I can't ...

Exploring Vue JS: A guide to using the onChange event to dynamically update input values

I am currently utilizing the npm package vue-range-component to adjust values via a slider, which then dynamically updates in the input field. However, I'm encountering an issue with applying the onChange event for inputs. I need to have the ability ...

Laravel Mix causing issues with Vue loading when extract() is used

I currently have a simple webpack.mix.js and resources/js/app.js setup in my Laravel project. Here is the code from webpack.mix.js: const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass(&ap ...

What is the process for changing the background color when a button or div is pressed, and reverting the color back when another button or div is

Looking to customize a list of buttons or divs in your project? Check out this sample layout: <button type="button" class="btn" id="btn1">Details1</button> <button type="button" class="btn" id="btn2">Details2</button> <button ty ...

Basic selection menu layout

I have put together a basic menu for my WordPress site without relying on classes or IDs: <div class="main-menu"> <nav> <ul> <li> <a href="#" class="menu-link">home</a> ...

Exploring the Vue 3 Composition API: Enhancing data flow by creating reactivity

Within my component, there is a basic select menu containing two options ("all" and "Investment"). The goal is to retrieve an array of data from a composable and display each row on the screen. Choosing "all" will show all rows, while selecting "Investment ...

I possess a certain input and am seeking a new and distinct output

I am looking to insert a word into an <input> and see an altered output. For example, Input = Michael Output = From Michael Jordan function modifyOutput() { var inputWord = document.getElementById("inputField").value; var outputText = "print ...

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

Seeking assistance with implementing media queries in JavaScript. Can an object be resized from JavaScript code based on a specific screen width, rather than the default one? For example, if I have a button that opens a div with a height of 600px when cli ...

What is the reason behind negative numbers appearing as "5-" rather than "-5" in the basic calculator coded using HTML and JavaScript?

As I am practicing my coding skills, I encountered an interesting issue. Any operation that results in a negative number displays as wrong, but when using console.logs it shows the correct result. Can someone explain why this is happening? <!DOCTYPE h ...

Executing the AngularJS nested controller only once

I am still new to Angularjs and just started working on an app that has several "projects" each with a local menu displayed on specific pages. The main navbar with footer is located in the Index.html: <body ng-app="ysi-app" ng-controller="MainControlle ...

Is there a way to determine if a directory is empty using Node.js?

Quite a while back, I submitted a question related to PHP. Now I'm facing a similar situation with Node.js where the code below appears to be sluggish when used in a loop - is there a way to achieve this using only vanilla JavaScript in pure Node.js w ...

Advantages of utilizing bracket notation (alongside variables) for retrieving a property from an object

When it comes to accessing stored information, utilizing alternatives like the dot operator can be straightforward. However, I’m struggling to grasp the significance of using variables in achieving the same goal. For instance: var myObj = { prop1: "v ...