[JavaScript知识库]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实例上

第四步

直接在组件中调用即可