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)}// 设置tokenexport function setToken(token){ return Cookies.set(TokenKey,token)}// 删除cookies里的tokenexport function removeToken(){ return Cookies.remove(TokenKey)} 第四步
在页面中用import引入调用即可使用cookie
注意：需要设置cookie过期时间或者完成后删除保存的 cookie值，防止
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实例上
第四步
直接在组件中调用即可