溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在工作當中，遇到了下面這個問題：
測試環境與生產環境中的用戶權限不一樣，因此，就需要根據測試環境打一個包，生產環境又打一個包。
可是，如果每次打包都需要更改權限的配置文件的話，會很麻煩，而且，體現不出一個coder該有的逼格。
為了更有逼格地解決這個問題，于是我百度了一番，上天不負有心人，讓我找到了解決方案。
在詳敘解決方案之前，先簡單介紹下解決方案當中使用到的工具：cross-env,webpack.DefinePlugin
cross-env是給process.env當中添加變量的，那process.env又是什么呢？
process是一個控制node.js的進程，它是一個global對象，包含進程相關的一些信息，而process.env則是包含用戶環境信息的一個對象，例如下面這樣的對象：
{
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對象當中添加自定義的數據，然后可以在任何node.js的執行環境當中獲取，一般是在打包配置當中獲取process.env.NODE_ENV來判斷是哪種環境，然后再作相應的配置。
官方解釋
如何使用cross-env
"script":{
"build:testing":"cross-env NODE_ENV=‘testing' webpack"
}
然后，我們執行npm run build:testing的時候，就好執行以上的命令，cross-env就會在process.env當中添加一個NODE_ENV的屬性，屬性的值就是‘testing'字符串，注意這里是加了單引號的，因為這樣才是一個字符串，如果不加的話，就相當于一個代碼片段，還要在獲取完之后通過JSON.stringify去轉成字符串。
webpack.DefinePlugin又是什么呢？
webpack.DefinePlugin是webpack自帶的一個插件，它的作用是在編譯的時候生成一些全局變量的，這里說的全局變量指的是客戶端的全局變量，相當于掛載在window對象上的變量，我們可以利用它的這個功能在不同的環境（開發，測試，或者生產）當中定義不同的行為。
官方介紹與使用
介紹完兩個插件了，是時候說一下兩者結合在實際當中如何使用了。
下面將展示如何解決本文開頭一開始所提到的根據測試和生產環境配置不同的用戶權限的問題。
在config目錄下，根據不同的環境創建不同的配置文件
如上圖所示，test.env.js是測試環境的配置文件，prod.env.js則是生產環境的配置文件
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"
}
分別創建測試與生產的權限配置文件
test.authority.js 測試環境權限
function getAuthority(userAuthority){
const menus = [];
switch(userAuthority){
case 'zhangsan':
menus = ["a","b","c","d"]; //這里的a,b,c,d相當與路由配置當中頁面的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 生產環境的配置方法頁和上面一樣，只不過是menus里的配置不同
使用cross-env配置對應的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執行的是測試環境的打包，npm run build則是生產環境的打包。
將當前環境的配置添加到客戶端全局
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添加到全局變量當中
plugins:[
new webpack.DefinePlugin({
"ENV":env
})
]
根據環境信息配置用戶權限
要對用戶權限進行控制是要先知道當前登錄的是哪個用戶，因此用戶權限配置的操作是在登錄頁面完成的。
login.vue
//獲取環境信息，然后根據環境信息讀取對應的權限配置文件
const env = ENV.NODE_ENV === "testing" ? "test" : "prod";
import getAuthority from `${env}.authority.js`;
export default {
methods:{
login(){
axios({...}).then(res => { //調用登錄接口獲取當前用戶信息
let userAuthority = getAuthority(res.userName); //獲取當前登錄用戶的頁面權限
sessionStorage.setItem("authorityPages",JSON.stringify(userAuthority)) //將用戶的頁面權限保存起來，在生成側邊欄的時候通過v-if指令判斷是否渲染
})
}
}
}
來到這里，就能夠解決本文一開始所提的問題了，下面總結一下。
總結
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
