Nuxt3 客户端权限控制

281次阅读
没有评论

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

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
正文完
 
wujingquan
版权声明:本站原创文章,由 wujingquan 2023-09-04发表,共计1817字。
转载说明:Unless otherwise specified, all articles are published by cc-4.0 protocol. Please indicate the source of reprint.
评论(没有评论)