(十八)实现一个完整的前后端请求登录的过程前端逻辑(axios+process+Vue-ls)

1：配置自适应(开发，生产)环境的全局变量

在根目录下面创建两个文件.env.development ，.env.production

(1).env.development 开发环境

NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://localhost:43597/
VUE_APP_AXIOS_API=/api

(2).env.production 生产环境

NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx:43597/
VUE_APP_AXIOS_API=/api

2：在main.js里面引用axios,并且对axios对象进行初始化

import Axios from "axios"; Axios.defaults.timeout = 100000//设置超时时间 Axios.defaults.baseURL = process.env.VUE_APP_AXIOS_BASEURL+ process.env.VUE_APP_AXIOS_API //设置axios的baseUrl Axios.defaults.withCredentials = true //允许跨域携带cookie信息 app.prototype.$Http = Axios //设置全局的$Http    3：在main.js里面引用并且挂着vue-ls(用了做缓存) import Storage from 'vue-ls'; const app=createApp(App); const options = {   namespace: 'vuejs__', // key键前缀   name: 'ls', // 命名Vue变量.[ls]或this.[$ls],   storage: 'local', // 存储名称: session, local, memory }; app.use(Storage, options); app.prototype.appls=app.ls;//配置全局的app.ls,方便其他任意地方使用   4：调用登录接口,将登录后放的结果存放到vue-ls里面  this.appls.set('Access-Token','wert')//假如wert就是后端登录成功后返回的token   5：在main.js开启axios请求的全局拦截器,让每一个请求都携带一个token(可以在其他js里面写,然后在main.js里面import那个js) Axios.interceptors.request.use(   config => {     var token=this.appls.get('Access-Token');     if(token){     config.headers.Authorization =token;     }       return config;   },   err => {       return Promise.reject(err);   });    6：在main.js开启axios响应的全局拦截器,让axios每次响应都会去执行(可以在其他js里面写,然后在main.js里面import那个js) (1)：响应全局拦截器设置 service.interceptors.response.use((response) => {  checkResponse(response)   return response.data }, err) (2)：检查token是否快要过期,如果在快要过期的时候,就好重新刷新token function checkResponse (res) {   // 刷新token   if (!res.headers) {       if (res.getResponseHeader('pms_exp') === '1') {         refreshToken(res)       }   } else if (res.headers.pms_exp === '1') {     refreshToken(res)   } } (3)：token刷新 function refreshToken (response) {   const config = response.config   return service.post('/Sys_User/replaceToken').then(res => {     if (res.status) {       Vue.ls.set(ACCESS_TOKEN, 'Bearer ' + res.data, 7 * 24 * 60 * 60 * 1000)//缓存有效时间是7天       config.headers['Authorization'] = 'Bearer ' + res.data //重新给axios的header赋新的token值       config.baseURL = process.env.VUE_APP_API_BASE_URL //给axios设置基路径        // 已经刷新了token，将所有队列中的请求进行重试        return service(config)     } else {       store.dispatch('Logout').then(() => {                 setTimeout(() => {                   window.location.reload()                 }, 1500)               })     }   }) }