如何使用 Axios 授权私有路由

Question

我正在尝试使用我构建的 api 进行服务器端身份验证。我所有的路线都经过测试，似乎在邮递员上运行良好。我在前端使用 Axios，所有公共路由都运行良好。使用 Axios 登录也可以正常工作。问题在于私有路由。我习惯了谷歌的 api 进行前端身份验证，所以我似乎无法弄清楚如何授权私有路由。

axios.js

axios.defaults.headers.common['Authorization'] = token;

axios.defaults.headers.post['Content-Type'] = 'application/json';

const login = () => {

  Axios({

    url: '/auth/login',

    baseURL: 'http://<ip address>/api/v1',

    method: 'post',

    data: {

      email: '<email>',

      password: '<password>'

    }

  }).then(res => sessionStorage.setItem('auth', res.data.token))

    .catch(err => console.log(err))

}

所以上面的代码可以正常工作，但我可能会通过将令牌保存到浏览器中的会话存储而走错方向。下面的代码是私有 postArticle 路由。我在哪里收到以下消息，Failed to load resource: the server responded with a status of 401 (Unauthorized)。

axios.js

const postArticle = () => {

  Axios({

    url: '/articles',

    baseURL: 'http://<ip address>/api/v1',

    method: 'post',

    data: {

      "title": "New Title",

      "subtitle": "Optional Subtitle",

      "description": "Small Intro to Social Media Integration",

      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec et odio pellentesque diam volutpat commodo. Odio aenean sed adipiscing diam. Lacus viverra vitae congue eu consequat. Porttitor rhoncus dolor purus non enim praesent elementum. Aliquam purus...",

      "tag": [

        "Mobile Development",

        "Diary"

      ]

    }

  }).then(res => console.log(res.data))

    .catch(err => console.log(err))

}

当我 console.log 标记它出来时，它是正确的，但我不确定我需要如何更改 postArticle 以接收默认标题。

Answer 1

弄清楚了。登录已正确完成。只需要将默认值带入 postArticle 的标题。const postArticle = () => {&nbsp; Axios({&nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; 'Authorization': Axios.defaults.headers.common['Authorization'],&nbsp; &nbsp; &nbsp; 'Accept': 'application/json',&nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json'&nbsp; &nbsp; },&nbsp; &nbsp; url: '/articles',&nbsp; &nbsp; baseURL: 'http://67.207.83.201/api/v1',&nbsp; &nbsp; method: 'post',&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; "title": "Another New Title",&nbsp; &nbsp; &nbsp; "subtitle": "Optional Subtitle",&nbsp; &nbsp; &nbsp; "description": "Small Intro for Play Play Play",&nbsp; &nbsp; &nbsp; "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec et odio pellentesque diam volutpat commodo. Odio aenean sed adipiscing diam. Lacus viverra vitae congue eu consequat. Porttitor rhoncus dolor purus non enim praesent elementum. Aliquam purus sit amet luctus venenatis. Mauris ultrices eros in cursus turpis. Accumsan tortor posuere ac ut consequat semper. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Facilisi nullam vehicula ipsum a arcu. Non tellus orci ac auctor augue mauris. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Ac ut consequat semper viverra nam libero justo. Ut aliquam purus sit amet luctus. Fermentum dui faucibus in ornare quam viverra orci sagittis eu. Tortor consequat id porta nibh.",&nbsp; &nbsp; &nbsp; "tag": [&nbsp; &nbsp; &nbsp; &nbsp; "Mobile Development",&nbsp; &nbsp; &nbsp; &nbsp; "Diary"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; }).then(res => console.log(res.data))&nbsp; &nbsp; .catch(err => console.log(err))}