全局的控制未登录时跳转到登录页面;
1、判断是否存在token
2、如果服务端响应401,
一般的我们会封装一个http请求,我们可以在这个http做一些拦截的工作。比方我们可以在这里拦截401,未登录状态的处理。
useRequest
import { AuthorizationError } from '@/common/error'
export default async function (url: string, options: {}) {
const config = useRuntimeConfig()
const router = useRouter()
const app = useNuxtApp()
const res = await useFetch(url, {
// baseURL: config.public.BASE_API + '/anshi',
headers: {
// Authorization: localStorage.getItem('token') ? 'Bearer ' + localStorage.getItem('token') : ''
},
...options
})
// console.log('res', res.error.value)
if (res.error.value?.statusCode === 401) {
// if (process.client) {
// window.location.href = '/b/login'
// }
throw new AuthorizationError()
} else {
return res
}
}
处理有两种方式: 一种就是判断是否 client side,如果是client side,我们就可以利用window.location.href来跳转,另外一种就是抛出一个错误,然后在全局的捕获到这个错误,然后利用navigateTo来跳转。
如果直接在composables内使用navigateTo
,会报错。如果在composables内,一个异步之后使用useRouter、useRoute这类的也会报同样的错误,但是可以在方法的头部使用。
[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables`.
// 报错
const router = useRouter()
export default async function (url: string, options: {}) {}
// 报错
export default async function (url: string, options: {}) {
await Promise.resovle()
const router = useRouter()
}
// 正确
export default async function (url: string, options: {}) {
await navigateTo('/')
}
// 报错
export default async function (url: string, options: {}) {
await Promise.resolve('')
await navigateTo('/')
}
// 正确
export default async function (url: string, options: {}) {
const router = useRouter()
await Promise.resovle()
}
其实在这里使用router是有一些问题的,比方router的一些方法是不起效果的,例如push、replace等等。
https://nuxt.com/docs/api/utils/navigate-to#navigateto 文档,有句话Make sure to always use await or return on result of navigateTo when calling it.
https://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables
正文完