环境变量-配置不同的请求基地址

设置开发环境和生产环境请求基地址

.env.devlopment开发环境

VUE_APP_BASE_API = 'http://ihrm-java.itheima.net'

 .env.production  生产环境的基地址

VUE_APP_BASE_API = 'http://www.xxx.com/prod-api'  

使用环境变量

工具层 request里面

const service = axios.create({
  // baseURL: 'http://ihrm-java.itheima.net'
   // 开发地址process全局设置 获取开发环境中VUE_APP_BASE_API地址
  baseURL: process.env.VUE_APP_BASE_API, // 设置axios请求的基础的基础地址
 timeout: 5000 // 定义5秒超时
})

修改端口号port ='8888' 修改端口号后要重启终端

ip和端口

开启终端未结束 开启另一个会造成端口占用问题

跨域产生的条件

不同源

http协议 ip地址 端口号

如何解决跨域问题

代理服务器解决跨域问题

vue-cli解决跨域

当前端口号为8888目标端口号为3000  启用代理服务器端口号为当前端口号 通过代理服务器转换成目标端口号  服务器与代理服务器不存在跨域问题

在vue.config.js中 

devServer: {
    // 代理服务器
    proxy: {
      '/api': {
        // 目标地址
        target: 'http://192.168.81.173:3000'
        // target: 'http://ihrm-java.itheima.net'
      }
    }
   
  },

 将token存储到vuex中

发送请求成功后获取token

获取token的方法

 在请求函数成功后 this.$store.commit('模块名/mutations函数名',res.data)

在vuex封装中 // 更新token 定义setToken 和清空token removeToken

在state里面存储token

在请求拦截器设置统一的token

//引入store文件
import store from '@/store'
// 添加请求拦截器
servies.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
//获取token 存储token
const token =store.state.user.token
if(token){
 config.headers.Authorization=`Bearer ${token}`
 }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

持久化三个方法

本地存储

vue-persistedstate 插件

cookies

改写发送请求

将doLogin中的请求改写为store模块module中user.js 的actions发送请求

         actions中发送请求

  actions: {
    // 实现登录函数
    async userLogin(context, formData) {
      // 实现发送请求获取token
      const res = await login(formData)
      console.log('发送请求成功,获取token', res.data)
      // 将res.data里面的token存储到vuex中
      context.commit('setToken', res.data)
    }
  }

在doLogin中调用actions函数 调用成功后跳转到首页

在permission.js设置路由守卫

import router from './router'
import store from '@/store'
//  to:要去哪个页面
//  from:从哪里来
//  next:它是一个函数。
//     如果直接放行 next()
//     如果要跳到其它页 next(其它页)
const whiteList = ['/login', '/404']
router.beforeEach((to, from, next) => {
  NProgress.start() // 开启进度条 跳转之前开启
  console.log(from.path, '跳转到', to.path)
  // 获取token
  const token = store.state.user.token
  // 判断是否有token
  if (token) {
    // 有token
    if (to.path === '/login') {
      // 去登录页
      console.log('已经登录要去首页')
      // 只要有指定地址跳转就不会经过router.afterEach
      next('/')
      NProgress.done()
    } else {
      console.log('已经登录直接放行')
      next()
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      console.log('拥有白名单')
      next()
    } else {
      console.log('没有白名单')
      next('/login')
      NProgress.done()
    }
  }
})

路由导航守卫-路由跳转进度条

引入样式文件

import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

 开启进度条 跳转之前开启

NProgress.start() 

跳转页面完成的钩子函数 关闭进度条

router.afterEach(() => {

  // 关闭进度条

  NProgress.done()

})

详情代码

import router from './router'
import store from '@/store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//  to:要去哪个页面
//  from:从哪里来
//  next:它是一个函数。
//     如果直接放行 next()
//     如果要跳到其它页 next(其它页)
const whiteList = ['/login', '/404']
router.beforeEach((to, from, next) => {
  NProgress.start() // 开启进度条 跳转之前开启
  console.log(from.path, '跳转到', to.path)
  // 获取token
  const token = store.state.user.token
  // 判断是否有token
  if (token) {
    // 有token
    if (to.path === '/login') {
      // 去登录页
      console.log('已经登录要去首页')
      // 只要有指定地址跳转就不会经过router.afterEach
      next('/')
      NProgress.done()
    } else {
      console.log('已经登录直接放行')
      next()
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      console.log('拥有白名单')
      next()
    } else {
      console.log('没有白名单')
      next('/login')
      NProgress.done()
    }
  }
})
// 跳转页面完成的钩子函数
router.afterEach(() => {
  // 关闭进度条
  NProgress.done()
})

解决跨域的三种方法

1.jsonp

 jsonp完整流程 :

(1)浏览器(html) : 声明一个函数,用于接收服务器响应数据

(2)浏览器 : 写一个script标签,路径是jsonp请求地址,添加一个额外参数 callback = 函数名

(3)服务器 : 处理完请求之后,返回一个函数调用的js代码,格式res.send('函数名(响应数据)') 函数名需要从参数callback获取---req.query.callback req.query得到的是请求头的参数

(4) 浏览器就会解析script 标签响应的js代码

方法二

CORS技术

服务器只需要在每一个路由里面都设置一个允许跨域的响应头 : res.setHeader('Access-Control-Allow-Origin', '*'); 会造成代码代码冗余 ,解决方案 :

设置express跨域中间件 : 类似于拦截器,会给每一个路由自动设置允许跨域响应头

安装 npm install cors

(1) 导入模块

const cors = require('cors')

(2)使用模块

app.use(cors())

方法三:vue-cli 代理服务器 

 持久化处理的三种方法

1.本地存储

2.vue-persistedstate 插件

3.cookies

参考上