SourceAbrar

Using $auth Module’s Redirect in Tandem With $router.push in Nuxt.js

Top Tech Firms

Top 10 Sports Betting App and Sports Mobile App Development Companies

Sports betting is one of the oldest forms of gambling, carried out by generations for a very...

Top Mobile App Development Companies in USA and Worldwide

The global headcount of app developers is growing exponentially. Paradoxically, the gap between mobile and web app...

Exploring the Top 10 Blockchain Companies From Australia

Recently, the Australian government published a 52-page report on its vision regarding blockchain development in the country. Essentially, the...
James Hook
An experienced Content Writer to work with a Big 4 consultancy on an exciting programme in the technology/AI (artificial intelligence) field, specifically within the transportation sector. Key responsibilities for the Content Writer include: Create white papers discussing subject matter in the technology/AI field, for applications within the transportation sector Utilise existing content ensuring it meets brand guidelines and drives the strategic priorities of the organisation Work collaboratively with colleagues The Successful Applicant will ideally have: Ability to produce written content, including editing and proofreading Strong understanding of technology language, drivers and outcomes Understanding of MS Office applications, Adobe Acrobat, Photoshop etc. Unrivalled attention to detail Good organisational skills including the ability to manage and reconcile competing priorities Good communication and interpersonal skills Ability to interact with stakeholders at various levels and ensure objectives are met Self-motivated, flexible and proactive attitude Exceptional English language skills

Recently I came across the issue of using the auth module in Nuxt.js and invoking a $router.push in the subsequent line of code in the same method. The conundrum began when the lines after the auth.loginWith method did not execute as intended since the page was redirected to the redirect URI. It has been only a week in the Vue.js land, so I suppose this issue is something faced by many newbies. So, here goes where it all started: I have a authenticate() function, whose body looks like:

try {
 await this.$auth.loginWith('local', { data: this.user })
 // some other line of code that shows loading msgs
 // ...
 this.$router.push(this.localePath({ path: 'dashboard' }))
} catch (e) {
  // handling error
}

Now, notice that once the line: 2 gets invoked, the execution is handed over to the auth middleware of nuxt.js. Thus, using a $router.push in line:5 is redundant. Before we proceed any further, let’s take a look where the auth’s configs are defined: Go to: 

nuxt.config.js

Find the key 

auth
  auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: 
    },

Notice, the 

home

 key.Bingo!This is exactly where we want to tweak. Before we do any tweaking, let’s make it clear what we are trying to do and why:

  • We want to use all the good things offered by the auth module, other than the redirect thing.
  • The lines after the $auth.loginWith are necessary to be executed before the view can be updated. In this case, it is a loading and success notification that needs to be shown before the user is redirected to the dashboard upon successful login.

Now, the only thing left to do is disabling the redirect case in auth option

  • home: false will do the job!

The auth object in nuxt.config.js would look like this now:

 auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: false
    },

Bam! We are done.

- Advertisement -

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Future Technology

All You Need to Know About the Life-Changing Digital Twin Technology

“Digital twin is a digital representation of a physical entity that helps in tracking and modifying the activities...

WhatsApp Users Hit 2 Billion: What Does This Mean for the Future of Privacy?

There are now over 2 billion registered users on the mobile messaging platform, up from 1.5 billion in 2017. Brief History...

How We Made a Simple Avatar Generator for Our Fitness Interviews

My name is Mads Phikamphon and I'm the founder of Bulk Hackers. At Bulk Hackers, we interview people who do great...

The Importance of Unlearning Emerging Technologies

The world of software is constantly changing at a very fast pace. Yesterday’s axioms might be tomorrow’s anti-patterns. Newborn technologies rise to popularity only to become...

How AI Could Save the 3D Printing Industry and the Future of Machines

3D printing is a billion-dollar market with a variety of use cases- from healthcare, replicas to architecture, airplane parts.

More Articles Like This

- Advertisement -