Как установить заголовок авторизации в vue.js - PullRequest
Новая
       14

Как установить заголовок авторизации в vue.js

0 голосов
/ 10 мая 2019

Я делаю аксиальный пост-звонок с токеном JWT, сгенерированным после успешного входа в систему.Для всех запросов мне нужно прикрепить токен JWT в заголовке, а в серверной части, которая разработана на основе Spring-Boot, у меня есть логика, чтобы получить токен из заголовка и проверить его.

В браузере сначалаЗапрос OPTIONS отправляется на сервер, где он выдает ошибку 403, и на сервер. Если я использую заголовки sysout, я не могу найти имя заголовка X-XSRF-TOKEN 

axios.post("http://localhost:8004/api/v1/auth", { "username": "test", "password" : "test"})
.then((response) => {
    let token = response.data.token;
    axios.defaults.headers.common["X-XSRF-TOKEN"] = token;
    axios.post("http://localhost:8004/api/v1/getdata", {"action" : "dashboard"})
    .then((response) => {
        console.log(response.data);
    }, (error) => {
        console.log(error);
    })
}, (error) => {
    console.log(error);
})

Spring boot part 

@Controller
@CrossOrigin(origins = "*", allowedHeaders = "*")
@RequestMapping(path = "/api/v1")
public class ApplicationController {
    @PostMapping(path = "/getdata")
    @ResponseBody
    public SessionData getData(@RequestBody ProfileRequest profileRequest) {
        try {
            return profileService.getData(profileRequest);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
}

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Настройка заголовка авторизации не связана с vue, но связана с axios. 

axios.post("http://localhost:8004/api/v1/getdata", {"action" : "dashboard"}, {
   headers: {
      Authorization: 'Bearer ' + token,
   }
})
0 голосов
/ 10 мая 2019

Когда вы получите токен авторизации, вы можете настроить экземпляр axios с помощью:

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`

common означает применение заголовка к каждому последующему запросу, а также можно использовать другие имена глаголов HTTP, если вы хотите применить заголовок только к одному типу запроса:

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

Вы найдете больше информации в https://github.com/axios/axios#config-defaults

...