在工作當(dāng)中，遇到了下面這個問題：

測試環(huán)境與生產(chǎn)環(huán)境中的用戶權(quán)限不一樣，因此，就需要根據(jù)測試環(huán)境打一個包，生產(chǎn)環(huán)境又打一個包。

可是，如果每次打包都需要更改權(quán)限的配置文件的話，會很麻煩，而且，體現(xiàn)不出一個coder該有的逼格。

為了更有逼格地解決這個問題，于是我百度了一番，上天不負(fù)有心人，讓我找到了解決方案。

在詳敘解決方案之前，先簡單介紹下解決方案當(dāng)中使用到的工具：cross-env,webpack.DefinePlugin

cross-env是給process.env當(dāng)中添加變量的，那process.env又是什么呢？

process是一個控制node.js的進程，它是一個global對象，包含進程相關(guān)的一些信息，而process.env則是包含用戶環(huán)境信息的一個對象，例如下面這樣的對象：

{ TERM: 'xterm-256color', SHELL: '/usr/local/bin/bash', USER: 'maciej', PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin', PWD: '/Users/maciej', EDITOR: 'vim', SHLVL: '1', HOME: '/Users/maciej', LOGNAME: 'maciej', _: '/usr/local/bin/node'}

使用cross-env可以往這個process.env對象當(dāng)中添加自定義的數(shù)據(jù)，然后可以在任何node.js的執(zhí)行環(huán)境當(dāng)中獲取，一般是在打包配置當(dāng)中獲取process.env.NODE_ENV來判斷是哪種環(huán)境，然后再作相應(yīng)的配置。

官方解釋

如何使用cross-env

1. 安裝：npm i cross-env -D
2. 在npm自定義命令當(dāng)中使用；

"script":{  "build:testing":"cross-env NODE_ENV=‘testing' webpack"}

然后，我們執(zhí)行npm run build:testing的時候，就好執(zhí)行以上的命令，cross-env就會在process.env當(dāng)中添加一個NODE_ENV的屬性，屬性的值就是‘testing'字符串，注意這里是加了單引號的，因為這樣才是一個字符串，如果不加的話，就相當(dāng)于一個代碼片段，還要在獲取完之后通過JSON.stringify去轉(zhuǎn)成字符串。

webpack.DefinePlugin又是什么呢？

webpack.DefinePlugin是webpack自帶的一個插件，它的作用是在編譯的時候生成一些全局變量的，這里說的全局變量指的是客戶端的全局變量，相當(dāng)于掛載在window對象上的變量，我們可以利用它的這個功能在不同的環(huán)境（開發(fā)，測試，或者生產(chǎn)）當(dāng)中定義不同的行為。

官方介紹與使用

介紹完兩個插件了，是時候說一下兩者結(jié)合在實際當(dāng)中如何使用了。

下面將展示如何解決本文開頭一開始所提到的根據(jù)測試和生產(chǎn)環(huán)境配置不同的用戶權(quán)限的問題。

在config目錄下，根據(jù)不同的環(huán)境創(chuàng)建不同的配置文件

如上圖所示，test.env.js是測試環(huán)境的配置文件，prod.env.js則是生產(chǎn)環(huán)境的配置文件

test.env.js的配置

const merge = require('webpack-merge')const devEnv = require('./dev.env')module.exports = merge(devEnv, { NODE_ENV: '"testing"'})

prod.env.js的配置

module.exports = {  NODE_ENV:"production"}

分別創(chuàng)建測試與生產(chǎn)的權(quán)限配置文件

test.authority.js 測試環(huán)境權(quán)限

function getAuthority(userAuthority){  const menus = [];  switch(userAuthority){    case 'zhangsan':      menus = ["a","b","c","d"];  //這里的a,b,c,d相當(dāng)與路由配置當(dāng)中頁面的name      break;      case 'lishi':        menus = ["a","b","c"];          break;      case 'wangwu':        menus = ["b","c","d"];          break;      default:        menus = ["a","b"];        }  return menus;}export default getAuthority;

prod.authority.js 生產(chǎn)環(huán)境的配置方法頁和上面一樣，只不過是menus里的配置不同

使用cross-env配置對應(yīng)的NODE_ENV

package.json

"scripts":{  "build:testing": "cross-env NODE_ENV='testing' node build/build.js",  "build": "cross-env NODE_ENV='production' node build/build.js"}

npm run build:testing執(zhí)行的是測試環(huán)境的打包，npm run build則是生產(chǎn)環(huán)境的打包。

將當(dāng)前環(huán)境的配置添加到客戶端全局

build/webpack.prod.conf.js

const env = process.env.NODE_ENV === 'testing' ? require("../config/test.env.js") : require("../config/prod.env.js");//配置webpack.DefinePlugin將env添加到全局變量當(dāng)中plugins:[new webpack.DefinePlugin({  "ENV":env})]

根據(jù)環(huán)境信息配置用戶權(quán)限

要對用戶權(quán)限進行控制是要先知道當(dāng)前登錄的是哪個用戶，因此用戶權(quán)限配置的操作是在登錄頁面完成的。

login.vue

//獲取環(huán)境信息，然后根據(jù)環(huán)境信息讀取對應(yīng)的權(quán)限配置文件const env = ENV.NODE_ENV === "testing" ? "test" : "prod";import getAuthority from `${env}.authority.js`;export default {  methods:{    login(){      axios({...}).then(res => {  //調(diào)用登錄接口獲取當(dāng)前用戶信息        let userAuthority = getAuthority(res.userName);  //獲取當(dāng)前登錄用戶的頁面權(quán)限        sessionStorage.setItem("authorityPages",JSON.stringify(userAuthority))  //將用戶的頁面權(quán)限保存起來，在生成側(cè)邊欄的時候通過v-if指令判斷是否渲染      })    }  }}

來到這里，就能夠解決本文一開始所提的問題了，下面總結(jié)一下。

總結(jié)

1. 根據(jù)不同的環(huán)境編寫對應(yīng)的打包環(huán)境信息配置文件；
2. 根據(jù)不同環(huán)境編寫對應(yīng)用戶權(quán)限配置文件；
3. 根據(jù)不同環(huán)境編寫對應(yīng)的npm打包命令，使用cross-env設(shè)置對應(yīng)的運行時環(huán)境；
4. 在打包配置文件當(dāng)中根據(jù)運行時環(huán)境獲取對應(yīng)的環(huán)境配置信息，然后使用webpack.DefinePulgin添加到客戶端全局變量當(dāng)中；
5. 登錄頁根據(jù)全局變量中的環(huán)境信息獲取對應(yīng)的用戶權(quán)限配置文件；
6. 用戶登錄之后根據(jù)獲取的用戶權(quán)限文件中的方法獲取登錄用戶的權(quán)限，并把當(dāng)前登錄用戶的權(quán)限保存起來以便之后使用。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。