Nuxt的项目携带token访问服务器接口


前言：
在前后端项目中，nuxt.js项目访问后台接口需要携带token进行身份校验。

一、在nuxt.config.js中添加配置

在这里插入图片描述

二、在plugins文件下增加axios.js配置文件，用于向请求中添加token

在这里插入图片描述
axios.js文件中内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export default function({$axios,redirect}){
    $axios.onRequest(config=>{
        console.log("Making request to"+config.url)
        //从本地获取token
       let token = localStorage.getItem("token")
       //如果token不为空，将token放入请求中
       if(token){
           config.headers.authorization = token
       }
       return config
    })
//错误处理机制
    $axios.onError(error => {
       const code = parseInt(error.response&&error.response.status)
       if(code===400){
           redirect('/400')
       }
    })
}

三、总结

  • 前端登录成功的时候，后端使用RSA非对称加密的方式向前台返回一个token，前台将token存储在本地。
  • 前台请求访问时需要从本地获取token放在请求中，用于身份验证。