Ways to direct to dashboard if a user is logged in using AngularJS

As a newcomer to AngularJS, I am facing an issue with redirecting my page to the dashboard once the user has logged in. I receive an access token after login, which I save in cookies. Despite trying solutions from Stack Overflow, I have not been able to resolve this problem.

Below is my code:

app.js

(function(window){

var app= angular.module('customersApp',['ngRoute','ngCookies','ui.bootstrap']);

app.config(['$routeProvider',
  function ($routeProvider) {
        $routeProvider.
        when('/login', {
            title: 'Login',
            controller: 'loginController',
               templateUrl: 'app/views/loginuser.html'
        })
            .when('/logout', {
                title: 'Logout',
                templateUrl: 'partials/login.html',
                controller: 'loginController'
            })

            .when('/dashboard', {
                title: 'Dashboard',
                templateUrl: 'app/views/dynamic_table.html',
                controller: 'dashboard'
            })
            .when('/verified_artists', {
                title: 'Verified Artists',
                templateUrl: 'app/views/verified_artists.html',
                controller: 'artistController'
            })
            .when('/new_artists', {
                title: 'New Request Artists',
                templateUrl: 'app/views/new_artists.html',
                controller: 'artistController'
            })

            .otherwise({
                redirectTo: '/login'
            });
  }]);
   window.app = app;

}(window));

loginController.js

app.controller('loginController', function ($scope,$http,$cookies,$cookieStore) {


    //initially set those objects to null to avoid undefined error
    $scope.login = {};
    $scope.signup = {};
    $scope.doLogin = function (customer) {


  $.post("websiteurl.com/admin_login",
  {

     user_email : $scope.login.email,
      password : $scope.login.password

  },


  function(data,status){

      data = JSON.parse(data);
      console.log(data);

    var someSessionObj = { 'accesstoken' : data.access_token};

    $cookies.dotobject = someSessionObj;
    $scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') };

    $cookieStore.put('obj', someSessionObj);
    $scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, };

    console.log($cookieStore.get('obj').accesstoken);

     if(data.flag==10)
      {
          alert(data.error);
      }
      else
      {
         window.location.href = "#/dashboard";

      }


  })


    };


}); 

Answer №1

Make sure to watch for any changes in the route and verify if a cookie is being used through the cookie store.

$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  // Check for the presence of the cookie 
  // If cookie is found 
    // Verify the next route
        // If it leads to the login/signup page
        // event.preventDefault(); (stop the route change and redirect to dashboard)
        // $location.path("/dashboard");
        
        // If it goes to another route
        // Allow the change.
  
  // If cookie not found
  // $location.path("/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

Detecting drag events between connected angular ui-trees is a complex yet achievable task

How can I trigger an action when an item is dragged from tree#1 to tree#2 and dropped? I want to make a specific HTTP call to save the transferred item. I have successfully implemented actions within one tree using the 'dropped' event, but strugg ...

Firebase issue: The function ref.once is throwing an Uncaught TypeError and is not recognized

I am attempting to utilize Firebase for both uploading a file and storing it in my database simultaneously. I want to track the number of uploads so that I can rename each file uniquely. While I have successfully uploaded and stored a copy in the database, ...

Strategies for transferring data between controllers and configuration files in AngularJS

I'm attempting to pass a variable to the angular js config, Here is my JavaScript app: var app = angular.module('myApp', ['ngMaterial', 'sasrio.angular-material-sidenav', 'ui.router']); app.controller('ba ...

Is there a way to remove or replace the existing polyline to ensure that only one is displayed at a time?

My goal is to have a single line drawn from the closest marker to a static position. I can determine which marker is the closest by sorting the distances, but if a new marker is added and is closer than the previous closest one, a new polyline is drawn wit ...

Retrieving information from a tag within an iFrame and passing it to its parent document

I've come across a few example posts on this topic, but for some reason, none of them are working for me. Here is the stack view of what I'm trying to accomplish: <html> <head>...</head> <body> <div>Som ...

How can I locate and substitute a specific script line in the header using Jquery?

I need to update an outdated version of JQuery that I have no control over, as it's managed externally through a CMS and I can't make changes to it. But I want to switch to a newer version of JQuery. Here is the old code: <script type="text/ ...

Adjust the content within an HTML div by utilizing AngularJS

Snippet of AngularJs code to display different content based on selection: <select> <option value="0">--Select--</option> <option value="1">Individual</option> <option value="2"> ...

AngularJS Dilemma: Virtual Machine Data Set but No Rendering in Sight

Below is the AngularJS controller code written in Typescript: /// <reference path='../../definitions.d.ts' /> module baseApp.viewControls.products { export interface IProductsScope extends IAppScope { vm: { product ...

Link the input's name to the parent's index in JavaScript

Can a relationship be established between the input element name and its parent index (div) in a way that the input name automatically changes whenever the div index changes? Imagine something like the following: <div> <input type="text" name=" ...

Only line breaks are permitted in Mustache.js, all other HTML characters are escaped

After a user submits input, I am generating comments and displaying them using Mustache.js. When it comes to rendering the comments, I have found that replacing user-entered line breaks (\n) with <br/> allows them to display as HTML breaks. To ...

Assign individual heights to multiple iFrames according to their content's height

Dealing with multiple iframes on a single page. Each iframe is sourced from my domain. The goal is to automatically calculate and set the height of each iframe on the page. The current code sets all iframe heights to match that of a specific iframe: fun ...

Using JavaScript to trigger actions via links or buttons inside a table will only function properly in the first row

After multiple consecutive Ajax requests to refill an HTML table, there seems to be a strange issue. The links in the first row of the table are functioning properly and call JavaScript functions, but for any subsequent rows, the links or buttons stop work ...

Discover multiple keys within a new Map object

Our usual approach involves creating a new Map like this: const hash = new Map() hash.set(key,value) To retrieve the information, we simply use: hash.get(specificKey) An advantage of using Map is that we have flexibility in choosing keys and values. Cur ...

Styled-Component: Incorporating Variables into Styled-Component is my goal

Currently, I am working on an app and have created a separate file for styling. I decided to use style-components for custom CSS, but faced an issue where I couldn't access variables instead of HEX values. Even after storing color values in a variable ...

A cutting-edge JQuery UI slider brought to life using HTML5's data-* attributes and CSS class styling

I've been attempting to create multiple sliders using a shared CSS class and HTML5 data attributes, but unfortunately, I haven't had much success so far. Although I am able to retrieve some values, there are certain ones that simply aren't w ...

Comparing Optimistic Updates and Tag Invalidation in RTK Query

I found a basic code example from the RTK query documentation: updatePost: build.mutation<void, Pick<Post, 'id'> & Partial<Post>>({ query: ({ id, ...patch }) => ({ url: `posts/${id}`, method: 'PUT', ...

The React application is experiencing difficulty in rendering SVG images exclusively on Windows operating systems

My react app runs smoothly on OSX, but encounters issues on Windows due to SVG files: Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file type. <svg xmlns="http://www.w3.org/2000/svg" viewBox="..."> I ...

CSS Navigation Bar Fails to Function Properly on Mobile Devices

Check out the plunkr I have created by visiting: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview The menu on this plunkr functions correctly on a desktop or laptop, but it doesn't display properly on a mobile device. I suspect that the issue may ...

JavaScript: the battle between anonymous and direct function invocation

Here is an interesting observation: when I assign an anonymous function to the onreadystatechange variable, everything works fine. However, if I try to assign a named function to this variable, it does not work as expected. <script language="Javascrip ...

The structure of NodeJS Express API calls revolves around handling asynchronous events

Currently, I am working on a hobby project using NodeJS and Express, but I am finding it challenging to manage asynchronous calls. There is a bug that I would like the community's help in resolving. I have set up an Express layout where I send post r ...