next.js 401时如何重定向?

gmxoilav  于 2023-05-22  发布在  其他
关注(0)|答案(1)|浏览(149)

我正在使用Next-auth和rtk查询。我需要当一个请求,任何,返回一个401未经授权的错误,页面直接重定向到登录。是怎么做到的?
我添加了'maxAge:60'添加到[... nextauth].js文件,并添加refetchInterval={30} refetchOnWindowFocus={true}到组件,试图找到类似的解决方案,但不起作用

amrnrhlw

amrnrhlw1#

因为你使用rtk查询,你可以更新你apiSlice baseQuery函数,来检查auth错误和重定向,我的建议是:
创建一个基本查询,在其中检查401和任何其他需要的错误:

// try to execute the req, if it fails logout, and redirect to login.
    const baseQueryWithAuth: BaseQueryFn = async (args, api, extraOptions) => {
      const result = await baseQuery(args, api, extraOptions);
      if (result.error?.status === 403 || result.error?.status === 401) {
        // non authorized, then redirect to login page.
        // if we have jwt, here u should update the access token
        localStorage.removeItem(TOKEN_KEY_IN_LOCAL_STORAGE);
        Router.replace('/auth/login');
      }
      return result;
    };

在上面的代码片段中,当我将令牌删除称为注销时,因为令牌在数据库中已经无效,所以我只需要在前面删除它,因此不需要无效请求。
上面提到的baseQuery可以这样做:

const baseUrl = `${process.env.NEXT_PUBLIC_API_PROTOCOL}://${process.env.NEXT_PUBLIC_API_HOST}/api`;
const TOKEN_KEY_IN_LOCAL_STORAGE = 'SavedToken';
const baseQuery = fetchBaseQuery({
  baseUrl,
  // credentials: 'include',
  prepareHeaders: (headers) => {
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem(TOKEN_KEY_IN_LOCAL_STORAGE);
    if (token) {
      headers.set('Authorization', token);
    } else {
      Router.replace('/auth/login');
    }
    return headers;
  },
});

现在,由于你有一个支持auth的工作库查询,你可以使用它为你的项目创建一个主rtk查询apiSlice

// create api
export const apiSlice = createApi({
  baseQuery: baseQueryWithAuth,
  tagTypes: ['tag1', 'tag2', 'tag3'],
  endpoints: (_builder) => ({}),
});

相关问题