Nuxtjs 'npm generate' не работает, дает ошибку 401 для некоторых страниц
Я использую nuxtjs для своего проекта с внешним видом.. после того, как я завершил часть своей разработки, и я пытаюсь разместить это на общем хостинге, поэтому я запускаю 'npm run generateкоманда. Но на некоторых страницах появляется эта ошибка.
Это код моей банковской страницы
<template>
<v-layout style="display:block">
<h2>Banks Details</h2>
<v-row>
<v-col cols="12" sm="9">
<v-data-table
:headers="tableHedaer"
:items="list.data"
@update:page="nxtPage"
:loading="loading"
dense
height="calc(100vh - 285px)"
disable-items-per-page
>
<template v-slot:item.action="{ item }">
<v-btn icon color="error">
<v-icon @click=";(selectID = item.id), (dialogSureR = true)"
>mdi-delete</v-icon
>
</v-btn>
</template>
</v-data-table>
</v-col>
<v-col cols="12" sm="3">
<v-card
style="border-radius: 0px; border:1px solid black;"
height="calc(100vh - 180px)"
flat
>
<v-card-text>
<v-col cols="12" sm="12">
Add new Bank
</v-col>
<v-divider />
<v-col cols="12" sm="12">
<v-text-field
v-model="form.bankCode"
outlined
label="Bank Code"
hide-details
></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-select
v-model="form.accountType"
:items="types"
outlined
label="Account Type"
height="30"
hide-details
></v-select>
</v-col>
<v-col cols="12" sm="12">
<v-text-field
v-model="form.bankName"
outlined
label="Bank Name"
hide-details
></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-text-field
v-model="form.branch"
outlined
label="Branch"
hide-details
></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-text-field
v-model="form.accountNo"
outlined
label="Account Number"
hide-details
></v-text-field>
</v-col>
<v-col cols="12" sm="12" class="text-right">
<v-btn @click="addBank()" color="indigo" small dark depressed
>save</v-btn
>
</v-col>
</v-card-text>
</v-card>
</v-col>
</v-row>
<!-- remove dialog -->
<v-dialog v-model="dialogSureR" max-width="290">
<v-card>
<v-card-title class="headline">Are You Sure?</v-card-title>
<v-card-text> </v-card-text>
<v-card-actions>
<div class="flex-grow-1"></div>
<v-btn @click="dialogSureR = false" color="red" text>
No
</v-btn>
<v-btn @click="removeBank(selectID)" color="green darken-1" text>
Yes
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<snack :s-text="sText" :s-color="sColor" :snackbar="snackbarv"></snack>
</v-layout>
</template>
<script>
import snack from '~/components/Loaders/snackBar'
export default {
components: {
snack
},
data() {
return {
tableHedaer: [
{
text: 'ID',
align: 'left',
sortable: false,
value: 'id'
},
{
text: 'Bank Code',
align: 'left',
sortable: true,
value: 'bankCode'
},
{
text: 'Account Type',
align: 'left',
sortable: false,
value: 'accountType'
},
{
text: 'Bank Name',
align: 'left',
sortable: false,
value: 'bankName'
},
{
text: 'Branch',
align: 'left',
sortable: false,
value: 'branch'
},
{
text: 'Account Number',
align: 'left',
sortable: false,
value: 'accountNo'
},
{
text: 'Remove',
align: 'left',
sortable: false,
value: 'action'
}
],
types: ['saving', 'current'],
list: [],
loading: false,
sText: '',
sColor: '',
snackbarv: false,
dialogSureR: false,
selectID: '',
form: {
bankCode: '',
accountType: '',
bankName: '',
branch: '',
accountNo: ''
}
}
},
watch: {
// snackbar modal value false time
snackbarv() {
if (this.snackbarv === true) {
if (this.sColor === 'success') {
setTimeout(() => {
this.snackbarv = false
}, 2000)
} else if (this.sColor === 'warning') {
setTimeout(() => {
this.snackbarv = false
}, 5000)
} else {
setTimeout(() => {
this.snackbarv = false
}, 3000)
}
}
}
},
async asyncData({ $axios }) {
const empcget = await $axios.$get('/admin/allBanks')
return {
list: empcget
}
},
methods: {
// get all banks data
getAllE() {
this.loading = true
this.$axios.$get(`/admin/allBanks`).then((data) => {
this.loading = false
this.list = data
})
},
// data table next and prev click load paginate data
nxtPage(no) {
this.loading = true
this.$axios
.$get(`${this.list.path}?page=${no}`)
.then((data) => {
this.list = data
this.loading = false
})
.catch((error) => {
this.loading = false
console.log(error)
alert('error')
})
},
// add new bank
addBank() {
if (
this.form.bankCode !== '' &&
this.form.accountType !== '' &&
this.form.bankName !== '' &&
this.form.branch !== '' &&
this.form.accountNo !== ''
) {
this.$axios
.$post(`/admin/saveNewBank`, this.form)
.then((data) => {
this.snackbarv = true
this.sText = 'Done'
this.sColor = 'success'
this.list.data.push(data.data)
})
.catch((error) => {
this.loading = false
console.log(error)
alert('error')
})
} else {
this.snackbarv = true
this.sText = 'Please fill all fields'
this.sColor = 'warning'
}
},
removeBank(id) {
this.$axios
.$delete(`/admin/removeBank/${id}`)
.then((data) => {
this.snackbarv = true
this.sText = 'Done'
this.sColor = 'success'
this.nxtPage(this.list.current_page)
this.dialogSureR = false
})
.catch((error) => {
this.loading = false
console.log(error)
alert('error')
this.dialogSureR = false
})
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .v-data-footer__select {
visibility: hidden !important;
}
</style>
И если я удалю нижнюю часть и запустил npm run generate команда работает без ошибок
async asyncData({ $axios }) {
const empcget = await $axios.$get('/admin/allBanks')
return {
list: empcget
}
},
функция контроллера laravel
/**
* return all bank details
*
* @return array all bank details
*/
public function getAll(){
$data = tblBank::paginate(50);
return new BankDetailsResource($data);
}
что в этом плохого?
Благодарю вас..
2 ответа
Решение
Я забыл добавить промежуточное ПО модуля nuxtjs auth на некоторые страницы, эта ошибка, выдаваемая этими страницами, после добавления ошибки промежуточного ПО исчезла
Вы дважды вызываете asyncData, что, вероятно, вызывает вашу ошибку. Если вы хотите сделать несколько запросов axios в своих asyncData, вы можете использовать цепочку обещаний следующим образом:
async asyncData ({ $axios }) {
const [empcget, customerget] = await Promise.all([
$axios.get('/admin/allBanks'),
$axios.get('/admin/allCustomers'),
])
return {
list: empcget.data,
customers: customerget.data
}
},