vue复习

vue封装

1. 封装环境地址

//封装环境地址
const env = {
    prod:{
    //线上环境
        baseURL:'https://www.liulongbin.top:8888',
    },
}

export default env;

2. 封装项目接口

// 封装项目接口
import request from "./repuest";

export function login (data){
    return request({
        url:'/login',
        method: 'POST',
        data,
    });
}

3. 封装axios

// 引入axios
import axios from "axios";
//引入env
import baseURL from "./nev";
// 引入element-ui
import {Message} from "element-ui";


//封装axios请求


// 封装axios实例
const requ = axios.create({
    baseURL: `${baseURL.prod.baseURL}/api/private/v1`,
    timeout: 2000,
})



//添加请求拦截
requ.interceptors.request.use(function(config){
    // console.log(config);
    if(config.url !== '/login'){
        const token = sessionStorage.getItem('token')
        // console.log(token);
        token && (config.headers['Authorization']=token)
    }
    return config;
},function(error){
    // 请求报错
    return Promise.reject(error);
})


//请求响应拦截
requ.interceptors.response.use(function(response){
    // 成功返回
    // console.log(response);
    const res = response.data;
    const stat = [200,201,204];
    // const status = [];
    if(stat.includes(res.meta.status)){
        // 提示信息
        Message({
            showClose: true,
            message: res.meta.msg,
            type: 'success'
          });
        return res.data;
    }
    return Promise.reject('数据错误');
},function(error){
    // 失败返回
    return Promise.reject(error);
})


export default requ;

4. 记住上次访问的地址，登录后再重新回到上次访问地址

思路：跳转到登录页时，将要访问的页面地址当作参数传给登录页，登录成功后，再跳回原页面

//router.js文件
router.beforeEach((to, from, next) => {
  // console.log(to.name);
  if (to.meta.pacc == true) {

    if (sessionStorage.getItem('token')) {
      next();
    } else {
      if (to.path == "/") {
        next();
      } else {
        console.log(to.name);
        next({
          path: "/",
          query: {
            redirect: to.name,
          },
        });
      }
    }
  } else {
    next();
  }
})