Enhance your AngularJS application with advanced security features and implement a local storage

Question

Enhance your AngularJS application with advanced security features and implement a local storage

I have implemented an AngularJS application that utilizes angular ui-router for routing.

Despite my efforts to enhance security, I encountered some challenges:

To manage user authentication, I store tokens and user roles in local storage, redirecting users based on their roles. However, the watch service I implemented on local storage does not retain the previous value upon refresh, causing my checks to fail.
If a user changes the token in local storage and then refreshes the site, I am unable to detect this change.
In such cases, unauthorized users can access templates but are unable to fetch data due to backend security measures. It is crucial to restrict access to templates as well.

I am seeking assistance in enhancing client-side security in Angular to address these issues.

javascript angularjs angular-ui-router local-storage yeoman

Answer 1

Answer №1

It seems like you want to ensure that users with the required permissions can only view certain templates. My approach involves checking the user's permissions before allowing access to different pages. I specify the necessary permission for each state, and if the user lacks the permission, they will be redirected to a designated page.

// Current user permissions
var currentPermissions = {
  "User.Read": true,
  "User.Create": false
}

// AngularJS module with ui-router
var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider) {

    $stateProvider.state('page1', {
            url: "/page1",
            data: { permission: "User.Read" },
            template: "Page 1"
        })
        .state('page2', {
            url: "/page2",
            data: { permission: "User.Read" },
            template: "Page 2"
        })
        .state('page3', {
            url: "/page3",
            data: { permission: "User.Create" },
            template: "Page 3"
        })
        .state("noAccess", {
            url: "/noAccess",
            template: "Access Denied"
        });
});

app.run(function($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {

        // Check if user has correct permission
        if (toState.data && !currentPermissions[toState.data.permission]) {
            event.preventDefault();
            $state.go('noAccess'); // Redirect if user does not have permission
        }
    });
});

You can view this in action here: https://jsfiddle.net/Darin_Cardin/mwg33rm4/

Answer 2

It seems like you want to ensure that users with the required permissions can only view certain templates. My approach involves checking the user's permissions before allowing access to different pages. I specify the necessary permission for each state, and if the user lacks the permission, they will be redirected to a designated page.

// Current user permissions
var currentPermissions = {
  "User.Read": true,
  "User.Create": false
}

// AngularJS module with ui-router
var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider) {

    $stateProvider.state('page1', {
            url: "/page1",
            data: { permission: "User.Read" },
            template: "Page 1"
        })
        .state('page2', {
            url: "/page2",
            data: { permission: "User.Read" },
            template: "Page 2"
        })
        .state('page3', {
            url: "/page3",
            data: { permission: "User.Create" },
            template: "Page 3"
        })
        .state("noAccess", {
            url: "/noAccess",
            template: "Access Denied"
        });
});

app.run(function($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {

        // Check if user has correct permission
        if (toState.data && !currentPermissions[toState.data.permission]) {
            event.preventDefault();
            $state.go('noAccess'); // Redirect if user does not have permission
        }
    });
});

You can view this in action here: https://jsfiddle.net/Darin_Cardin/mwg33rm4/

Enhance your AngularJS application with advanced security features and implement a local storage

Answer №1

Similar questions

Exploring Three.js raycasting in a non-full screen scenario

Why does the lazy loading feature keep moving the background image around?

Choose all the HTML content that falls within two specific tags

Angular: controller's property has not been initialized

Adjusting the NVM Node version with a Bash script

iOS devices do not support the add/removeClass function

Align the Bootstrap Nav Bar in the Center

HTML code with embedded messages

When you click on the Admin Panel Side menu, the page refreshes instead of expanding the menu item

Is there a way to direct to a specific URL upon clicking a button using PHP?

After a period of time since the server has been initialized, the function req.isAuthenticated() no

AngularJS application, when making a CORS GET request, is not transmitting HTTP headers

Exploring the differences between $scope binding and $broadcast in managing an application timer

Changing the color of an open Bootstrap 4 accordion panel when the page loads

Add a specific CSS class to a div element depending on the status of a checkbox

When the user clicks on the page, show the data fetched from MySQL and echoed in

Establish a value for the attribute of an HTML tag

Error message: Unable to locate module without the '.js' extension at the end of the import file path

Is there a convenient feature in WebStorm for quickly inserting a lambda function in TypeScript that matches the current argument's signature while coding?

Deploying Node.js on Heroku