I have a list of restricted countries on the website, and now I want to remove the restriction rules on a specific Internal IPs.
I have tried the code below based on my little experience but didn't succeed:
export default {
data() {
return {
noLicenseForCountry: false,
deviceIp: '',
country: null,
excludeIp: [
'89.165.142.150',
'89.165.142.151',
]
restrictionCountryRegion: [
'IT',
'ES',
'BG',
'HR',
'CY',
],
}
},
mounted() {
if (process.env.NODE_ENV) {
if (Cookies.get('country')) {
this.country = Cookies.get('country')
const userCountry = Cookies.get('country')
const countryInfoFilter =
countries[
userCountry
]
if (typeof countryInfoFilter !== 'undefined') {
this.countryInfo = countryInfoFilter
}
if (this.$region === 'sc' && this.restrictionEuCountryScRegion.includes(userCountry)) {
if (this.excludeIp.includes(this.deviceIp)) {
this.noLicenseForCountry = false
this.$refs['region-modal'].hide()
} else {
this.noLicenseForCountry = true
this.$refs['region-modal'].show()
}
}
}
fetch('https://api.ipify.org/?format=json')
.then((results) => results.json())
.then((data) => {
this.deviceIp = data.ip
console.log(this.deviceIp)
})
}
}
<template>
<b-modal
id="cmp-region-popup"
ref="region-modal"
no-close-on-esc
no-close-on-backdrop
hide-footer
hide-header
centered
size="lg"
content-class="gradient-border"
>
<template v-if="noLicenseForCountry">
<div class="row m-0 p-0 justify-content-center">
<div class="col-sm-11 mx-0 px-0 text-center">
<p class="text-center">
{{ $t(`components.regionPopup.${$region}.restricted`) }}
</p>
<button class="Regin-button" @click="reDirect()">{{ $t(`components.regionPopup.ctaVisit`) }}</button>
</div>
</div>
</template>
</b-modal>
</template>