vue页面使用阿里oss上传功能的实例(二)


Posted in Javascript onAugust 09, 2017

本文主要介绍OSS管理控制台设置访问权限、角色等。分享给大家,具体如下:

进入控制台,鼠标移到右上角用户名处,点击“访问控制”,如下图:

vue页面使用阿里oss上传功能的实例(二)

如果没有此功能,则将鼠标移至 产品 -> 管理与控制,点击 访问控制进入访问控制产品页

vue页面使用阿里oss上传功能的实例(二)

1.创建子账号

点击左侧的 用户管理 -> 自定义授权策略 ->新建授权策略 , 如下图:

vue页面使用阿里oss上传功能的实例(二)

2.新建授权策略

点击左侧的 策略管理 -> 新建用户 , 如下图:

vue页面使用阿里oss上传功能的实例(二)

  • 在弹出对话框中:选择授权策略模板(使用空模板)
  • 编辑授权策略并提交:修改 授权策略名称(自定义名称),备注,策略内容,并提交。

示例:一个MNS授权策略内容模版:

{
            "Statement": [
             {
                "Action": "mns:*",
                "Effect": "Allow",
                "Resource": "acs:mns:*:*:*" 
              }
            ],
            "Version": "1"
           }

授权策略是json格式的字符串,其中,Action : 表示要授权的操作,MNS 操作都以"mns:"开头,

例如: "mns:SendMessage" 表示 MNS 服务的API:SendMessage/BatchSenMessage

其他详见附录:MNS API和授权操作映射表;

Effect : 表示授权类型, 例如:Allow, Deny

Resrouce : 表示要授权的阿里云资源名(ARN),格式为:"acs:<云服务名>: <地域名>: <主账号UID>:<资源URI>"

例如:“acs:mns:cn-hangzhou:123456789:/queues/MyQueue1/messages”

表示:授权资源是主账号UID为123456789在cn-hangzhou地域的MyQueue1。
用""表示不指定具体的字段,例如:"acs:mns:::" 表示不指定地域名,主账号ID和资源URI,子账号可以访问主账号的所有mns资源。

3.授权子账号访问MNS

  • 返回 用户管理 ,找到第一步创建的子账号,点击右侧 授权
  • 在弹出的对话框中,选择授权策略名称,并添加到右侧已选授权策略列表,点击 确定 提交,如下图:

vue页面使用阿里oss上传功能的实例(二)

4.创建角色

点击左侧的 角色管理 -> 新建角色如下图:

vue页面使用阿里oss上传功能的实例(二)

vue页面使用阿里oss上传功能的实例(二)

4.授权策略访问角色

点击左侧的 角色管理 ,在右侧的角色列表中选择需要授权的角色,点击授权,如下图:

vue页面使用阿里oss上传功能的实例(二)

5.注意事项

1.server端的代码中

var sts = new STS({
  accessKeyId: '子账号 accessKeyId',
  accessKeySecret: '子账号 accessKeySecret',
});

accessKeyId 和 accessKeySecret 为第一步创建的子用户的 key

2.rolearn

var rolearn = '对应角色的Arn值';

3.policy

var policy = {
  "Version": "1",
  "Statement": [
  {
    "Effect": "Allow",
    "Action": [
    "oss:GetObject",
    "oss:PutObject"
    ],
    "Resource": [
    "acs:oss:*:*:BucketName",
    "acs:oss:*:*:BucketName/*"
    ]
  }
  ]
};

这里的policy 必须和之前创建的策略一致。

源码地址:https://github.com/taosin/alioss-js-upload

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
Javascript 获取LI里的内容
Dec 17 Javascript
js 判断 enter 事件
Feb 12 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
详解vue-router导航守卫
Jan 19 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 #Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 #Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
vue 打包后的文件部署到express服务器上的方法
Aug 09 #Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 #Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 #Javascript
AngularJS ionic手势事件的使用总结
Aug 09 #Javascript
You might like
Yii CGridView用法实例详解
2016/07/12 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python3实现简单飞机大战
2020/11/29 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
介绍一下如何优化MySql
2016/12/20 面试题
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
订货会邀请函
2015/01/31 职场文书
陪护人员误工证明
2015/06/24 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
实用求职信模板范文
2019/05/13 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
volatile保证可见性及重排序方法
2022/08/05 Java/Android