最近在思考如何提供一种前后端开发功能测试既高效又安全的方案,因为对于我平时的项目是前后端同时进行的,后端我已经有了完备的权限管理,前端不能的角色会有不同的访问数据权限。而在vue前后端分离开发情况下,由于后端没有登陆人员的信息,因此除了开放访问的资源都是被拒绝访问的。这时有没有什么办法可以在dev环境下开放权限,而在构建的生产版本中是有完整权限控制的呢?

一个自然的思路是:如果是dev环境后端就放开所有权限,如果是生产环境就有权限管理。但是问题是这个dev环境是指前端的,后端并不能知道。要通知后端是开发还是生产环境,可以通过http的header来传递这个信息。当我们在做前端开发时,就传这个header,否则就不加该header条目。

另外一方面,我们必须考虑安全性,因为前端传递dev/prod信息是不可靠的,我的思路是前端除了传递一个dev/prod环境之外,还必须传一个token密码,该密码属于敏感信息,因此不会在代码中出现。问题又来了,由于密码信息在env.js中配置,只有webpack构建时通过nodejs代码读取,如何传递给我们的源代码呢?

要解决这个问题,就需要介绍webpack的DefinePlugin了,它可以将webpack的构建信息传递给我们的js源代码!

我们再看另外一个常见场景:我们的ajax请求对应的host主机在开发和生产肯定是不一样的,这时对于dev和prod两种场景,我们希望将对应的host/port信息传递给我们的源代码,这样无论在dev,staging,prod都能请求到正确的entry.这时也是DefinePlugin的一个应用场景。

具体办法:

上面我们通过__API__这个由DefinePlugin定义的变量传递到我们的js代码中,这样我们的js代码通过hostUrl这个常量就能永远访问到正确的entry了!

其中有一点需要注意的是DefinePlugin定义的变量如果是字符串必须使用 "' your string '" 这种形式,一般我们可以通过stringify调用就好了,因为它自动会加上双引号!

new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),

webpack中使用DefinePlugin来传递构建的环境变量给源代码使用的更多相关文章

  1. JAVA中常用需要设置的三个环境变量(JAVA_HOME、CLASSPATH、PATH)

    JAVA中常用需要设置的三个环境变量: JAVA_HOME.CLASSPATH.PATH (一) 配置环境变量:(相对路径) 1. JAVA_HOME=x:/jdk1.6.0 2. 用%JAVA_HO ...

  2. webpack中使用DefinePlugin定义全局变量

    DefinePlugin可以在编译时期创建全局变量.DefinePlugin是webpack注入全局变量的插件,通常使用该插件来判别代码运行的环境变量.

  3. Titanium系列--安装Titanium Studio 中的Android SDK,JDK以及环境变量的配置(二)

    Ubuntu安装配置JDK 1.先去 Oracle下载Linux下的JDK压缩包,我下载的是jdk-8u25-linux-x64.tar.gz文件,下好后直接解压 Step1:# 将解压好的jdk1. ...

  4. 在Win7中修改 系统盘中 “系统” - “用户” 的环境变量映射关系

    1.在此列表中,选中对应登录帐号 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList 2.将Prof ...

  5. java中eclipse的安装和JDK的环境变量的配置以及记事本的使用

    2020-04-09 23:26:15 学习java的第一步当然就是环境配置了,java中的配置作为小白刚刚开始肯定会有点一点晕头转向的,开没等开始入门呢!就要准备放弃了.哈哈哈哈,没关系的,都是这么 ...

  6. 在ubuntu系统中,遇到 “由于/bin 不在PATH 环境变量中,故无法找到该命令”问题

    2018年01月07日 11:27:34 YangJianShuai 阅读数 3024更多 分类专栏: linux 好多命令的位置在/usr/bin.恢复办法如下:1. /usr/bin/sudo v ...

  7. uboot环境变量(设置bootargs向linux内核传递正确的参数)

    这是我uboot的环境变量设置,在该设置下可以运行initram内核(从内存下载到nandflash再运行),但是运行nfs根文件系统的时候一直出错,各种错误.查看了很多资料后猜想应该是uboot传递 ...

  8. webpack 使用环境变量

    要在开发和生产构建之间,消除 webpack.config.js 的差异.你可能需要环境变量. 可以使用 Node.js 模块的标准方式:在运行 webpack 时设置环境变量,并且使用 Node.j ...

  9. express+gulp构建项目(四)env环境变量

    这里的文件的作用是负责设置env环境变量和日志. index.js try { require('dotenv').load({silent: true}); //dotenv从一个.env文件中读取 ...

随机推荐

  1. Java入门——初识Java

    Java入门——初识Java 摘要:本文主要对Java这门编程语言进行简单的介绍. Java简介 说明 Java语言历时十多年,已发展成为人类计算机史上影响深远的编程语言,从某种程度上来看,它甚至超出 ...

  2. java核心技术第一篇之数据库基础

    01.数据库的概念: 1).数据库的概念:数据库(Database),就是存储数据的仓库. 2).作用:用来存储和管理大量数据的.内部采用了非常便于查询的机制来存储数据,能保证我们在大量数据的情况下 ...

  3. Oracle 去重后排序

    因项目需求,需要将查询结果,去重后,在按照主键(自增列)排序,百度一番,记录下来 DEMO SELECT * FROM (SELECT ROW_NUMBER() OVER(PARTITION BY S ...

  4. python 计算 对象 占用大小

    # 这里主要是计算文件内容(str)的大小即: 统计空间占用情况, 并转换宜读单位 K,M def gen_atta_size(con): # 参数可以是任意数据类型 if con: size_b = ...

  5. 剑指offer 20:顺时针打印矩阵

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...

  6. 如何使用 CODING 进行瀑布流式研发

    你好,欢迎使用CODING!这份最佳实践将帮助你通过 CODING 更好地实践瀑布流式开发流程. 什么是瀑布流式研发 1970 年温斯顿·罗伊斯(Winston Royce)提出了著名的"瀑 ...

  7. 将Docker容器转移至另一服务器

    1 把当前的容器提交为一个镜像: docker commit 容器名 镜像名 2 将镜像存为tar文件 docker save 镜像名 >备份文件.tar 3将 备份文件.tar 复制到目的主机 ...

  8. 告诉你一些DBA求职面试技巧

    告诉你一些DBA求职面试技巧 要自信!永远不要低估你的能力.如果你不了解什么问题的答案,承认它.重点放在你找出答案的能力和你学习的意愿. 不要自大!是的,你可能过于自信而被认为是骄傲的.轻率的,甚至是 ...

  9. 【cf741】D. Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths(dsu on tree)

    传送门 题意: 给出一颗以\(1\)为根的有根树,树边带有一个字符(\(a\)~\(v\))的信息. 输出对于每个结点,其子树内最长的简单路径并且满足边上的字符能够组成回文串. 思路: 显然最终的答案 ...

  10. 5. git-lab 项目操作

    项目操作 一.给成员授权项目权限 之前我们是给组增加成员.  当有的项目需要给组下面的成员授权不一样的时候. 我们需要在项目里面给成员授权权限 点击管理区域 点这个项目 看下图,我们可以看到  现在这 ...