Nuxt3 客户端权限控制

全局的控制未登录时跳转到登录页面；

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