cookie具体配置方法+axios具体配置方法

cookie配置项

第一步

执行命令

npm install js-cookie

第二步

在根目录的untils文件夹下面新建auth.js文件

第三步

auth.js文件的内容

1.引入Cookies

2.定义存储的名字

3.调用cookie中自带的方法

a.Cookies.get:获取保存的值

b.Cookies.set:设置新的值

c.Cookies.remove:删除cookies里面的值

4.抛出用自带方法定义的函数

import Cookies from 'js-cookie'
​
const TokenKey='token'
​
// 获取token的方法
export function getToken(){
  return Cookies.get(TokenKey)
}
// 设置token
export function setToken(token){
  return Cookies.set(TokenKey,token)
}
// 删除cookies里的token
export function removeToken(){
  return Cookies.remove(TokenKey)
}

第四步

在页面中用import引入调用即可使用cookie

注意：需要设置cookie过期时间或者完成后删除保存的 cookie值，防止内存泄漏

axios的基本封装

axios官方网站

axios官网GitHub - axios/axios: Promise based HTTP client for the browser and node.js

中文文档axios中文文档|axios中文网 | axios

第一步

下载axios依赖

npm install axios -S

第二部

在untils文件夹创建https.js文件

内容：

1.引入axios

2.创建axios实例

实例中的属性：baseURL：根地址

timeout:超时时间，

headers：返回后端数据的格式配置

3.添加请求拦截器与响应拦截器

请求拦截器可配置：每次请求时添加请求头

失败时配置响应状态码

相应拦截器可配置：对token值做过期处理

import axios from 'axios'
import { getToken } from '@/utils/auth'
// import router from '@/router'
import { MessageBox } from 'element-ui'
​
const http = axios.create({
  baseURL: '/',
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})
console.log(http)
/**
 * 请求拦截
 */
http.interceptors.request.use(
  (config) => {
    config.headers['token'] = getToken() // 请求头带上token
​
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
​
/**
 * 响应拦截
 */
http.interceptors.response.use(
  (response) => {
    // if (response.data && response.data.status === 2) {
    //   // 401, token失效
    //   /**
    //    * TODO: token过期处理接口文档没有明确标识
    //    */
    //   // removeToken()
    //   router.push({
    //     name: 'login'
    //   })
    // }
    return response
  },
  (error) => {
    let title = ''
    let message = ''
​
    if (error && error.response) {
      message = error.response.data.message
      // 401, token失效
      // if (error.response.data.status === 2) {
      //   router.push({
      //     name: 'login'
      //   })
      // }
      switch (
        error.response.status // 跨域存在获取不到状态码的情况
      ) {
        case 400:
          title = '错误请求'
          break
        case 401:
          title = '资源未授权'
          break
        case 403:
          title = '禁止访问'
          break
        case 404:
          title = '未找到所请求的资源'
          break
        case 405:
          title = '不允许使用该方法'
          break
        case 408:
          title = '请求超时'
          break
        case 500:
          title = '内部服务器错误'
          break
        case 501:
          title = '未实现'
          break
        case 502:
          title = '网关错误'
          break
        case 503:
          title = '服务不可用'
          break
        case 504:
          title = '网关超时'
          break
        case 505:
          title = 'HTTP版本不受支持'
          break
        default:
          title = error.response.status
      }
      return MessageBox.alert(message, title, {
        type: 'warning'
      })
    } else {
      // 跨域获取不到状态码或者其他状态进行的处理
      return MessageBox.alert('请联系系统管理员, 或稍后再试!', '未知错误', {
        type: 'error'
      })
    }
  }
)
​
console.log(http, '112')
​
export default http

第三步

在main.js中import引入https.js文件

将实例挂载在prototypeUes实例上

第四步

直接在组件中调用即可