Авторизация JWT с Axios и Vue.js (Заголовок) - PullRequest
Новая
       44

Авторизация JWT с Axios и Vue.js (Заголовок)

0 голосов
/ 18 января 2019

Я все еще довольно новичок в веб-разработке, поэтому заранее прошу прощения, если решение очевидно или мой вопрос задан плохо.

Итак: я хотел бы использовать JWT для аутентификации моих пользователей. Я использую axios, vue.js и, конечно, JWT. Я хотел бы получить доступ к безопасному маршруту: 

router.post('/secureroute', checkAuth, (req, res) => {
res.status(200).json({
    message: 'all ok'
})
});

Для этого я использую check-auth.js : 

const jwt = require('jsonwebtoken');

module.exports = (req, res, next) => {
 try {
    const token = req.headers.authorization.split(" ")[1];
    console.log(token);
    const decoded = jwt.verify(token, process.env.SECRET_KEY);
    next();
} catch (error) {
    return res.status(401).json({
        message: 'Auth failed'
    })
}

next();

}

часть моего Login.vue: 

methods: {
 login() {
  if (!this.username) this.alertUsername = true;
  if (!this.password) this.alertPassword = true;

  axios
    .post("/user/login", {
      username: this.username,
      password: this.password
    })
    .then(res => {
      localStorage.setItem("usertoken", res.data.token);
      if (res.data.token) {
        console.log("Success");
        router.push({ name: "start" });
      } else {
        this.alertWrong = true;
      }
      this.username = "";
      this.password = "";
    })
    .catch(err => {
      console.log(err);
    });
  this.emitMethod();
}

При использовании почтальона с заголовком авторизации все работает нормально. Но после нескольких часов поиска в Интернете и опробования, я просто не знаю, как заставить его работать с реальным сайтом. Я хотел бы передать JWT в качестве заголовка авторизации. Я знаю, что это возможно с axios, но я действительно не знаю, как я могу сделать это в моем примере здесь.

1 Ответ

0 голосов
/ 19 января 2019

У вас есть поток входа в систему, и вы сохраняете пользовательский токен в localStorage как ключ usertoken. Вы также убедились, что ваши запросы обрабатываются правильно, если установлен заголовок авторизации.

Самый простой способ работать с запросами API - это немного больше абстрагироваться от axios, автоматически добавлять токен авторизации и, возможно, предварительно обрабатывать полученный ответ. Например, вы можете захотеть обрабатывать некоторые ошибки глобально, а не в каждом конкретном случае, или хотите преобразовать запрос во что-то, что всегда одинаково.

Сначала вы хотите создать абстракцию, которая вызывает axios.request. Вы можете передать ему объект конфигурации, как описано здесь . Сейчас для вас важнее всего пара headers ключ-значение, но вы можете захотеть расширить ее в будущем. 

export default request (config) {
  const userToken = window.localStorage.getItem('usertoken');

  const requestConfig = { ...config };
  if (!requestConfig.headers) {
    requestConfig.headers = {};
  }

  if (userToken) {
    requestConfig.headers.authorization = `Bearer ${userToken}`;
  }

  return axios.request(requestConfig);
}

Теперь мы можем расширить это: 

export default post (url, data = {}, config = {}) {
  return request({
    ...config,
    method: 'POST'
    url,
    data
  });
}

При проверке запроса в консоли разработчика вы должны увидеть, что, если токен пользователя правильно задан в localStorage, в вашем запросе есть дополнительный заголовок, который отправляется на сервер.

...