Question

我有一个react / redux应用程序从api服务器获取令牌。在用户进行身份验证之后，我想让所有axios请求都将该令牌作为Authorization标头，而不必手动将其附加到操作中的每个请求。我很反应/ redux并且不确定最佳方法并且没有在谷歌上找到任何高质量的点击。

这是我的redux设置：

// actions.js
import axios from 'axios';

export function loginUser(props) {
  const url = `https://api.mydomain.com/login/`;
  const { email, password } = props;
  const request = axios.post(url, { email, password });

  return {
    type: LOGIN_USER,
    payload: request
  };
}

export function fetchPages() {
  /* here is where I'd like the header to be attached automatically if the user
     has logged in */ 
  const request = axios.get(PAGES_URL);

  return {
    type: FETCH_PAGES,
    payload: request
  };
}

// reducers.js
const initialState = {
  isAuthenticated: false,
  token: null
};

export default (state = initialState, action) => {
  switch(action.type) {
    case LOGIN_USER:
      // here is where I believe I should be attaching the header to all axios requests.
      return {
        token: action.payload.data.key,
        isAuthenticated: true
      };
    case LOGOUT_USER:
      // i would remove the header from all axios requests here.
      return initialState;
    default:
      return state;
  }
}

我的令牌存储在state.session.token下的redux商店中。

我对如何继续有点迷茫。我已经尝试在我的根目录中的文件中创建axios instance并更新/导入而不是从node_modules，但是当状态更改时它没有附加标头。非常感谢任何反馈/想法，谢谢。

Answer 1

有多种方法可以实现这一目标。在这里，我已经解释了两种最常见的方法。

1。您还可以使用axios interceptors拦截任何请求并添加授权标头。

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    const token = store.getState().session.token;
    config.headers.Authorization =  token;

    return config;
});

2。从axios axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;您可以看到有一种机制可供您设置默认标头，该标头将随您发出的每个请求一起发送。

axios.defaults.headers.common['Authorization'] = store.getState().session.token;

所以在你的情况下：

(function() {
     String token = store.getState().session.token;
     if (token) {
         axios.defaults.headers.common['Authorization'] = token;
     } else {
         axios.defaults.headers.common['Authorization'] = null;
         /*if setting null does not remove `Authorization` header then try     
           delete axios.defaults.headers.common['Authorization'];
         */
     }
})();

如果需要，可以创建一个自执行功能，当商店中存在令牌时，该功能将设置授权标题。

`Exception in thread "main" java.lang.UnsatisfiedLinkError: 
no mpi_java in     java.library.path
at java.lang.ClassLoader.loadLibrary(ClassLoader.java:1867)
at java.lang.Runtime.loadLibrary0(Runtime.java:870)
at java.lang.System.loadLibrary(System.java:1122)
at mpi.MPI.<clinit>(MPI.java:206)
at main.Main.main(Main.java:10)`

现在您不再需要手动将令牌附加到每个请求。您可以将上述功能放在保证每次都执行的文件中（例如：包含路径的文件）。

希望有所帮助：）

Answer 2

对我来说，最好的解决方案是创建一个客户端服务，您将使用它来实例化您的令牌并使用它来包裹axios。

import axios from 'axios';

const client = (token = null) => {
    const defaultOptions = {
        headers: {
            Authorization: token ? `Token ${token}` : '',
        },
    };

    return {
        get: (url, options = {}) => axios.get(url, { ...defaultOptions, ...options }),
        post: (url, data, options = {}) => axios.post(url, data, { ...defaultOptions, ...options }),
        put: (url, data, options = {}) => axios.put(url, data, { ...defaultOptions, ...options }),
        delete: (url, options = {}) => axios.delete(url, { ...defaultOptions, ...options }),
    };
};

const request = client('MY SECRET TOKEN');

request.get(PAGES_URL);

在此客户端中，您还可以根据需要从localStorage / cookie中检索令牌。

Answer 3

如果您使用“axios”：“^ 0.17.1”版本，您可以这样做：

创建axios实例：

public static void main(String[] args){
    System.out.println(digitRange(0,5));//0 is les than or equal to 5. 
                                        //Therefore true is printed. 
}

然后对于任何请求，将从localStorage中选择令牌，并将其添加到请求标头中。

我使用此代码在整个应用中使用相同的实例：

// Default config options
  const defaultOptions = {
    baseURL: <CHANGE-TO-URL>,
    headers: {
      'Content-Type': 'application/json',
    },
  };

  // Create instance
  let instance = axios.create(defaultOptions);

  // Set the AUTH token for any request
  instance.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token');
    config.headers.Authorization =  token ? `Bearer ${token}` : '';
    return config;
  });

祝你好运。

Answer 4

同样，我们有一个函数来设置或删除来自这样的调用的令牌：

import axios from 'axios';

export default function setAuthToken(token) {
  axios.defaults.headers.common['Authorization'] = '';
  delete axios.defaults.headers.common['Authorization'];

  if (token) {
    axios.defaults.headers.common['Authorization'] = `${token}`;
  }
}

我们总是在初始化时清理现有的令牌，然后建立收到的令牌。

Answer 5

如果您希望将来调用其他api路线并将您的令牌保留在商店中，请尝试using redux middleware。

中间件可以监听api操作并相应地通过axios发送api请求。

这是一个非常基本的例子：

操作/ api.js

export const CALL_API = 'CALL_API'; function onSuccess(payload) { return { type: 'SUCCESS', payload }; } function onError(payload) { return { type: 'ERROR', payload, error: true }; } export function apiLogin(credentials) { return { onSuccess, onError, type: CALL_API, params: { ...credentials }, method: 'post', url: 'login' }; }

<强>中间件/ api.js

import axios from 'axios'; import { CALL_API } from '../actions/api'; export default ({ getState, dispatch }) => next => async action => { // Ignore anything that's not calling the api if (action.type !== CALL_API) { return next(action); } // Grab the token from state const { token } = getState().session; // Format the request and attach the token. const { method, onSuccess, onError, params, url } = action; const defaultOptions = { headers: { Authorization: token ? `Token ${token}` : '', } }; const options = { ...defaultOptions, ...params }; try { const response = await axios[method](url, options); dispatch(onSuccess(response.data)); } catch (error) { dispatch(onError(error.data)); } return next(action); };

Answer 6

重点是为每个请求在拦截器上设置令牌

import axios from "axios";
    
const httpClient = axios.create({
    baseURL: "http://youradress",
    // baseURL: process.env.APP_API_BASE_URL,
});

httpClient.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token');
    config.headers.Authorization =  token ? `Bearer ${token}` : '';
    return config;
});

Answer 7

尝试像下面那样创建新实例

var common_axios = axios.create({
    baseURL: 'https://sample.com'
});

// Set default headers to common_axios ( as Instance )
common_axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// Check your Header
console.log(common_axios.defaults.headers);

使用方法

common_axios.get(url).......
common_axios.post(url).......

Answer 8

有时您会遇到一些情况，其中一些使用axios发出的请求指向不接受授权标头的端点。因此，仅在允许的域上设置授权标头的替代方法如下例所示。将以下函数放在每次运行React应用程序时执行的任何文件中，例如路径文件中。

export default () => {
    axios.interceptors.request.use(function (requestConfig) {
        if (requestConfig.url.indexOf(<ALLOWED_DOMAIN>) > -1) {
            const token = localStorage.token;
            requestConfig.headers['Authorization'] = `Bearer ${token}`;
        }

        return requestConfig;
    }, function (error) {
        return Promise.reject(error);
    });

}

Answer 9

export const authHandler = (config) => {
  const authRegex = /^\/apiregex/;

  if (!authRegex.test(config.url)) {
    return store.fetchToken().then((token) => {
      Object.assign(config.headers.common, { Authorization: `Bearer ${token}` });
      return Promise.resolve(config);
    });
  }
  return Promise.resolve(config);
};

axios.interceptors.request.use(authHandler);

在尝试实现类似的东西时遇到了一些麻烦，根据这些答案，这就是我想到的。我遇到的问题是：

如果使用axios请求在商店中获取令牌，则需要在添加标头之前检测路径。如果您不这样做，它将尝试将标头也添加到该调用中，并陷入循环路径问题。添加正则表达式以检测其他调用的相反操作也可以
如果商店正在返回承诺，则需要将调用返回给商店以在authHandler函数中解析承诺。异步/等待功能将使其更容易/更明显
如果对auth令牌的调用失败或是获取令牌的调用，您仍然希望使用config来解决promise

附加所有axios请求的Authorization标头

9 个答案: