Vue实现登录功能详解，前期配置（整合）（处理token，vuex配置，axios配置，router配置等）

npm install axios; // 安装axios
npm install vuex  // 安装vuex

/* 存储数据 */
export const setItem = (key, value) => {
  // 将数组、对象类型的数据转换为 JSON 格式字符串进行存储
  if (typeof value === "object") {
    value = JSON.stringify(value);
  }
  window.localStorage.setItem(key, value);
};

/* 获取数据 */
export const getItem = (key) => {
  const data = window.localStorage.getItem(key);
  try {
    return JSON.parse(data);
  } catch (err) {
    return data;
  }
};

/* 删除数据 */
export const removeItem = (key) => {
  window.localStorage.removeItem(key);
};

import Vue from "vue";
import Vuex from "vuex";
// 加载storage模块：获取token，存储token
import { getItem, setItem } from "@/utils/storage";

Vue.use(Vuex);
// 用户登陆后的token值
const TOKEN_KEY = "X-Token";

export default new Vuex.Store({
  // 处理用户 Token,定义容器当中数据
  state: {
    // 用户的登录状态信息，存储当前登录用户信息（token等数据）
    // 1. user: null || JSON.parse(window.localStorage.getItem(TOKEN_KEY))
    user: getItem(TOKEN_KEY),
    LOADING: false, // vuex全局控制loading显示与隐藏
  },
  mutations: {
    setUser(state, data) {
      state.user = data;
      // 把数据备份到本地存储，防止vuex刷新丢失
      // window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user))
      setItem(TOKEN_KEY, state.user);
    },
    showLoading(state) {
      state.LOADING = true;
    },
    hideLoading(state) {
      state.LOADING = false;
    },
  },
  actions: {},
  modules: {},
});

// 封装 axios 请求模块
import axios from "axios";
import store from "@/store";
import router from "@/router";

// axios.create 方法创建一个axios的实例
const request = axios.create({
  baseURL: "/localhost", // 接口的基准路径,监听拦截以/localhost开头的请求接口，并替换成target
});

// 请求拦截器：是否注入token
request.interceptors.request.use(
  function (config) {
    store.commit("showLoading");
    return config;
  },
  function (error) {
    store.commit("hideLoading");
    return Promise.reject(error);
  }
);

// store文件中vuex和localstorage对token进行处理之后响应拦截器中统一处理 token 过期
// 处理流程：在axios拦截器中加入token刷新逻辑；用户token过期时，向服务器请求新的 token；旧token替换为新token；然后继续用户当前的请求
// 响应拦截器
request.interceptors.response.use(
  function (response) {
    store.commit("hideLoading");
    return response;
  },
  async function (error) {
    store.commit("hideLoading");
    // console.dir(error);
    if (error.response && error.response.status === 400) {
      // 校验是否有token，没有的话请求失败，提示重新登陆
      const user = store.state.user;
      if (!user || !user.refresh_token) {
        router.push("/selectchongzhi");
        return;
      }
      // 如果有refresh_token，则请求获取新的 token
      try {
        const res = await axios({
          method: "PUT", // 对数据进行全部更新
          url: "/admin/waterMeter/login",
          headers: { "X-Token": localStorage.getItem("X-Token") },
        });

        // 如果获取成功，则把新的 token 更新到容器中
        console.log("刷新 token 成功", res);
        store.commit("setUser", {
          token: res.data.data.token, // 最新获取的可用 token
          refresh_token: user.refresh_token, // 还是原来的 refresh_token
        });
        return request(error.config);
      } catch (err) {
        // 如果获取失败跳转首页
        console.log("请求刷线 token 失败", err);
        router.push("/selectchongzhi");
      }
    }
    return Promise.reject(error);
  }
);

// http状态码拦截(可省略不写)
axios.defaults.validateStatus = (status) => {
  if (status === 403) {
    router.push({ name: "403" });
    return false;
  } else if (status === 500) {
    router.push({ name: "500" });
    return false;
  } else if (status === 503) {
    router.push({ name: "503" });
    return false;
  } else if (status === 401) {
    ElMessageBox.confirm(
      "登录状态已过期，您可以继续留在该页面，或者重新登录",
      "系统提示",
      {
        confirmButtonText: "重新登录",
        cancelButtonText: "取消",
        type: "warning",
      }
    ).then(() => {
      console.log("重新登录！");
    });
    return false;
  } else if (status === 404) {
    router.push({ name: "404-404" });
    return false;
  } else {
    return status >= 200 && status < 300;
  }
};

export default request;

// 存储接口封装，用户相关的请求模块
import request from "@/utils/request.js";

// -用户登录
export const login = (data) => {
  return request({
    method: "POST",
    url: "/admin/waterMeter/login",
    data,
  });
};

export const others = (params) => {
  return request({
    method: "GET",
    url: "/admin/information/others",
    params,
  });
};

export const listRecord = () => {
  return request({
    method: "GET",
    url: "/admin/record/listRecord",
    headers: { "X-Token": localStorage.getItem("X-Token") },
  });
};

import { login } from '@/api/user'

async onSubmit (values) {
      let { mobile: vcPhone, password: vcLoginpassword } = values
      const { data } = await login({ vcPhone, vcLoginpassword, })
      // console.log(data);
      if (data.message == "跳转到首页") {
        this.$toast.success("登录成功");
        // 登录成功以后将后端返回的 token 相关数据存储到容器中
        this.$store.commit('setUser', data.data.token)
        this.$router.push({ name: "mychongzhi" });
      } else {
        this.$toast.fail('登录失败，请稍后重试')
      }
      // console.log("submit", values);
    },

import Vue from "vue";
import App from "./App.vue";
import router from "./router"; // 路由对象
import store from "./store"; // 管理用户token
import "vant/lib/index.css";
import "@/styles/common.less"; /*引入公共样式，放在Vant样式下否则会被Vant覆盖*/
import "amfe-flexible"; // 手机页面适配，动态设置 REM 基准值
import "./utils/time"; // 封装转化时间格式的函数
import axios from "axios";

Vue.config.productionTip = false;
Vue.prototype.$axios = axios;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");