AngularJS向路由添加授权

2023-10-21前端开发问题
9

本文介绍了AngularJS向路由添加授权的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

如何向 AngularJS 和 ui.router 添加授权?我正在使用 modulg ng-oauth https://github.com/andreareginato/oauth-ng

How can I add authorization to AngularJS and ui.router? I'm using the modulg ng-oauth https://github.com/andreareginato/oauth-ng

我可以使用页面中的以下示例 http://andreareginato.github.io/oauth-ng/?

Can I use the following examples from the page http://andreareginato.github.io/oauth-ng/?

$scope.$on('oauth:login', function(event, token) {
  console.log('Authorized third party app with token', token.access_token);
});

$scope.$on('oauth:logout', function(event) {
  console.log('The user has signed out');
});

$scope.$on('oauth:loggedOut', function(event) {
  console.log('The user is not signed in');
});

$scope.$on('oauth:denied', function(event) {
  console.log('The user did not authorize the third party app');
});

$scope.$on('oauth:expired', function(event) {
  console.log('The access token is expired. Please refresh.');
});

$scope.$on('oauth:profile', function(profile) {
  console.log('User profile data retrieved: ', profile);
});

谢谢,西蒙

推荐答案

你可以像这样创建一些常量角色:

You could create some constant roles like this:

.constant('USER_ROLES', {
    ALL: '*', //@unused
    ADMIN: 'ROLE_ADMIN';
    USER: 'ROLE_USER',
    ANONYMOUS: 'ROLE_ANONYMOUS' 
})

将此自定义数据/常量添加到您的状态:

Add this custom data/constants to your states:

$stateProvider.state('myapp.admin', {
    url: '/admin',
    .....
    data : {
        authorizedRoles : [USER_ROLES.ADMIN] //Thes
    }
}

因此,当您对这些角色进行身份验证并从数据库中检索这些角色时,您可以将其存储在您的用户对象和会话中,以便最终在路由更改时进行验证...

So when you authenticate and retrieve these roles from your database you can store this in your user object and session so you can eventually verify this when a route changes...

在您的身份验证服务中(除了登录、注销等),您可以添加以下方法.

In your auth service (apart from logging in, logging out etc...) you add the following methods.

isAuthenticated: function () {
    return session.hasSession();
},

isAuthorized: function (authorizedRoles) {
    if (!angular.isArray(authorizedRoles)) {
        authorizedRoles = [authorizedRoles];
    }

    var roles = session.roles();

    var roleIncluded = roles.some(function (role) {
        return (authorizedRoles.indexOf(role) != -1);
    });

    return (session.hasSession() && roleIncluded);
},

因此,当您更改应用程序中的路由时,.run 会发生块验证,并且可以进行预防.

So when you change the route in the applications .run block validation occurs and prevention is possible.

$rootScope.$on('$stateChangeStart', function (event, next) {
    if (authService.isAuthenticated()) {
        if (next.data.authorizedRoles === null) {
            handle();
        }
        if (!authService.isAuthorized(next.data.authorizedRoles)) {
            handle();
        }
    } else {
        handle();
    }
}

当然这只是一个例子,请记住还有其他解决方案.

Ofcourse this is just an example and bear in mind there are other solutions.

这篇关于AngularJS向路由添加授权的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

layui laydate日期时间范围,时间默认设定为23:59:59
在Layui中,如果你想设置日期时间选择器(datetime)的默认结束时间为当天的23:59:59,你可以使用如下代码: laydate.render({ elem: '#test10' ,type: 'datetime' ,range: true ,max: '{:date("Y-m-d 23:59:59")}' ,ready: function(date){ $(".layui-laydat...
2024-10-24 前端开发问题
279

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301

JavaScript(js)文件字符串中丢失"\"斜线的解决方法
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转...
2024-10-17 前端开发问题
437

layui中table列表 增加属性 edit="date",不生效怎么办?
如果你想在 layui 的 table 列表中增加 edit=date 属性但不生效,可能是以下问题导致的: 1. 缺少日期组件的初始化 如果想在表格中使用日期组件,需要在页面中引入 layui 的日期组件,并初始化: script type="text/javascript" src="/layui/layui.js"/scrip...
2024-06-11 前端开发问题
455

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript
Rails/Javascript: How to inject rails variables into (very) simple javascript(Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript)...
2024-04-20 前端开发问题
5