Ways to guide user after logging out

My Angular front end includes the following code in app.js to handle user logout:

.when('/logout', {
  templateUrl: 'mysite/views/logout.html',
  resolve: {
    authenticated: ['djangoAuth', function(djangoAuth){
      return djangoAuth.authenticationStatus();
    }],
  }
})

The logout.js file contains:

'use strict';

angular.module('angularDjangoRegistrationAuthApp')
  .controller('LogoutCtrl', function ($scope, $location, djangoAuth) {
    djangoAuth.logout();
  });

The content of logout.html is as follows:

<div id="logout_view" ng-controller="LogoutCtrl">
    <div class="alert alert-info">You have logged out.</div>
</div>

Everything works fine, but I want to redirect users to main.html instead of showing the logout.html page after clicking /logout. However, when I change the templateUrl to point to mysite/views/main.html, the LogoutCtrl is not executed and users are not properly logged out.

Question:

Is there a way to successfully redirect users to main.html after they log out (meaning the logic in logout.js is executed)?

Answer №1

For a successful logout operation and redirection to your page, you can use the following code:

.when('/logout', {
    templateUrl: 'mysite/views/main.html',
    controller: LogoutCtrl,
    resolve: {
      authenticated: ['djangoAuth', function(djangoAuth){
        return djangoAuth.checkAuthenticationStatus();
      }],
    }
  })

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

Advantages of using individual CSS files for components in React.js

As someone diving into the world of Web Development, I am currently honing my skills in React.js. I have grasped the concept of creating Components in React and applying styles to them. I'm curious, would separating CSS files for each React Component ...

Utilizing Axios for Vue Multiselect on select/enter Event

I have successfully implemented a Vue Multiselect feature that retrieves options from my database using an axios call. This functionality works great as it allows users to select existing options or add new ones to create tags. While this setup is working ...

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

I am attempting to integrate a map into a website using D3 and topoJSON that resembles the following: However, when I create the map with D3/topoJSON, it shows up small and inverted. Even after exploring various solutions (like Center a map in d3 given a ...

Accessing table cell value when clicked using JavaScript or jQuery

I am currently working on an ASP.NET MVC application where I have a table displaying records from the database in razor code. My goal is to extract the record ID "FeeZoneID" from a cell value when the delete link in the last column is clicked, and then t ...

Different ways to analyze elements from 2 arrays to hone in on specific values

I'm really struggling to solve this issue. I have two arrays - one for cars and the other for active filters. The cars array consists of HTML li tags with attributes like car type, number of seats, price, etc. On the other hand, the active_filters arr ...

Is there a way for me to view the names of the images I am uploading on the console?

Recently, I've started using express and NodeJs. I've created a function called upload that is responsible for uploading images. Here is the code: const fs = require("fs"); var UserId = 2; var storage = multer.diskStorage({ destination: functi ...

Challenges encountered when passing objects with Angular 2 promises

I am encountering a problem when using a promise to retrieve a Degree object in Angular 2. The initial return statement (not commented out) in degree.service functions correctly when paired with the uncommented implementation of getDegree() in build.compon ...

Guide on downloading a PDF file with NodeJS and then transmitting it to the client

My goal is to download a PDF file using NodeJS and then send its data to the client to be embedded in the page. Below is the code snippet I am using to download the PDF file: exports.sendPdf = function(req, responce) { var donneRecu = req.body; va ...

Limit the radio button to being clickable

Ugh, I'm really struggling with this. I want to create a quiz where only the radio button is clickable, not the text itself. Can anyone help me figure out how to do this? I have two codes below that I don't quite understand. I'll include th ...

What is the reason for hasChildNodes returning true when dealing with an Empty Node?

When the user clicks on purchase and the cart is empty, there should be an alert. However, it seems that no response is triggered. Upon running the program, an error message appears stating that it cannot read the property of addEventListener which is unde ...

Is there a method to prevent the repetition of this loop?

I have a question regarding my React app development. I am currently using useEffect to loop through six items every time, even when only one item has changed. How can I optimize this so that only the variable that was changed in the reducer function is ...

Validating dynamic textboxes in Angular with custom rules

Creating dynamic textboxes with *ngFor in Angular <tr *ngFor="let computer in _Computers; let i = index;"> <td>{{computer.Name}}</td><td>{{computer.Optional}}</td> <td> <input matInput [formControl] = " ...

Error encountered with Angular JS Express JS File Upload: "undefined is not a function"

There seems to be an error displaying in the console: TypeError: undefined is not a function at C:\nodefiles\new\server.js:101:16 at Layer.handle [as handle_request] (C:\nodefiles\new\node_modules\express\li ...

What is the reason for the variable being limited to the template when passed through onLoad in ng-include?

I need help understanding how angular scope functions!!! I am passing two variables to a single template using ng-init and onLoad. Both variable values are accessible from the template, but there is only one controller bound to that template. I am wonderi ...

jQuery: add to either element

What is the most efficient way to use .appendTo for either one element or another based on their existence in the DOM? For instance, I would like to achieve the following: Preferred Method: .appendTo($('#div1') || $('#div2')); Less ...

Leveraging clusters in Node.js for REST API deployment

Within my node.js application, I have a REST API that contains complex logic with extensive looping, taking over 7 seconds to complete. As the loop count may increase in the future, the processing time is bound to increase as well. To optimize performance ...

Automatically submitting forms without having to refresh the page

I have been searching for answers online, but none of them seem to help me. Additionally, I am struggling to grasp the concept of Ajax. I need everything to happen on a single page without any refreshing until the entire form is submitted. <form id=" ...

Here is a way to transfer the form data from the modal component to the submit handler

I am currently developing a VUE application that includes displaying a team table with information fetched from the backend using axios and django rest_framework. Everything is functioning properly. However, I encountered an issue when clicking on "new ca ...

Removing a database record with JQuery

I have implemented a PHP function that converts any 2D PHP array into an HTML table. Within the table, I want to include a delete button in each row. When the user clicks on the delete button, I need jQuery to extract specific fields (3 fields) and submit ...

Issue with running gulp ser on first attempt in SPFX

Every time I try running gulp serve, I encounter the following issue: Error: Unable to locate module '@rushstack/module-minifier-plugin' Please assist me with this problem. Thank you! ...