-1

我试图用不记名令牌从我的前面到我的 api 进行授权,在我的 api 中它的所有工作我都用 insmonia 进行测试,当我尝试以这种方式在标题中添加授权时,问题就在前面,我正在使用react-redux 用于存储,redux-persist 用于持久化数据,当我尝试添加时

     export function setToken({ payload }) {
      if (!payload) return;
    
      const { token } = payload.auth;
    
      if (token) {
        api.defaults.headers.authorization = `Bearer ${token}`;
      }
    }
   export default all([
    takeLatest('@auth/persist/REHYDRATE', setToken),
    takeLatest('@auth/SIGN_IN_REQUEST', signIn),
    takeLatest('@auth/SIGN_UP_REQUEST', signUp),
  ]);

但是当我重新加载我的管理页面时,我在浏览器中进行 httprequests(post/get etc),它没有在标题中接收授权并说 createError.js:16 Uncaught (in promise) Error: Request failed with status code 401

    Request URL: http://localhost:3333/notifications
Request Method: GET
Status Code: 401 Unauthorized
Remote Address: [::1]:3333
Referrer Policy: strict-origin-when-cross-origin

RESPONSE HEADERS
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 23
Content-Type: application/json; charset=utf-8
Date: Mon, 11 Jan 2021 00:52:14 GMT
ETag: W/"17-IQ4NhR9c983ggGeU6wL1lrE99jM"
Keep-Alive: timeout=5
X-Powered-By: Express


REQUEST HEADERS
Accept: application/json, text/plain, */
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:3333
Origin: http://localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-GPC: 1
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.101 Mobile Safari/537.36

我做错了什么?如何添加不记名和令牌的授权?

如果有助于理解问题,这是我的项目存储库 https://github.com/dariocoroneldev/Error

4

1 回答 1

-1

当我在应用程序的任何地方从我的函数 setToken() 之外的标头中添加授权时,它会起作用,但是如果我这样做,我会像手动那样手动进行测试,因为我不知道如何在 setToken 之外获取我的令牌()

const tokentest =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwiaWF0IjoxNjEwMzE3NDcwLCJleHAiOjE2OTY2MzEwNzB9.TikP-RQknI5YMVZmirTH69agd2P0zsW5jIHFcK27kO8';

api.defaults.headers.Authorization = `Bearer ${tokentest}`;

现在问题不再是发送授权,现在我不知道如何使用我由 react-perssit 库生成的操作在 setToken 函数之外获取我的令牌,所以这里是我的代码

 import { takeLatest, call, put, all } from 'redux-saga/effects';
    import { toast } from 'react-toastify';
    import history from '~/services/history';
    import api from '~/services/api';
    import { signInSuccess, signFailure } from './actions';
    
    // const test = api.defaults.headers.Authorization;
    // console.log(test);

      //here it work, but how can i get my token from here?
      //why just working here and not inside my fucntion?

      const tokentest =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwiaWF0IjoxNjEwMzE3NDcwLCJleHAiOjE2OTY2MzEwNzB9.TikP-RQknI5YMVZmirTH69agd2P0zsW5jIHFcK27kO8';

api.defaults.headers.Authorization = `Bearer ${tokentest}`;
    
    export function* signIn({ payload }) {
      try {
        const { email, password } = payload;
    
        const response = yield call(api.post, 'session', {
          email,
          password,
        });
        const { token, user } = response.data;
    
        if (!user.provider) {
          toast.error('usario no es porveedor');
        }

         //but here doe'snt work nothing when i do this
    
         api.defaults.headers.Authorization = `Bearer ${token}`;
    
        yield put(signInSuccess(token, user));
    
        history.push('/admin');
      } catch (err) {
        toast.error('error de autenticacion, verifique sus datos');
        yield put(signFailure());
      }
    }
    
    export function* signUp({ payload }) {
      try {
        const { name, email, password, whatsapp, repeatPassword } = payload;
        yield call(api.post, 'users', {
          name,
          email,
          password,
          whatsapp,
          repeatPassword,
          provider: true,
        });
    
        history.push('/sesion');
      } catch (err) {
        toast.error('error al registarse');
        yield put(signFailure());
      }
    }
       //here not working too
    export function setToken({ payload }) {
      if (!payload) return;
      const { token } = payload.auth;
      console.log(token);
      if (token) {
        api.defaults.headers.Authorization = `Bearer ${token}`;
      }
    }
    
    export default all([
      takeLatest('@auth/persist/REHYDRATE', setToken),
      takeLatest('@auth/SIGN_IN_REQUEST', signIn),
      takeLatest('@auth/SIGN_UP_REQUEST', signUp),
    ]);

为什么只在这里工作而不是在我的职能范围内?

于 2021-01-12T18:36:31.197 回答