目录

• 1. 配置好相应的路由
• 2. 配置登录事件，存储token事件
• 3. 在路由界面设置，进入组件前beforeEnter，判断token
• 4. 配置拦截器
• 5. 配置状态机
• 6. 在组件进入前，与退出前，如果设置了代码，则需要去优化
• 7. 账户等级设置（权限设置）

1.配置好相应的路由

import axios from "axios";

const users = {
    login(data) {
        return axios({
            url: "/users/login",
            method: "POST",
            data
        });
    },
    register(data) {
        return axios({
            url: "/users/register",
            method: "POST",
            data
        });
    },
    getUserInfo() {
        return axios({
            url: "/users/getUserInfo",
            // 配置请求头（后续可优化）
            headers: {
                Authorization: localStorage.token
            },
        })
    }
}

export default users;

2.配置登录事件，存储token事件

    async submitForm() {
      const res = await this.$api.users.login({
        username: this.ruleForm.username,
        password: this.ruleForm.pass,
      });
      if (res.code == 1) {
      // 存储到本地
        localStorage.token = res.token;
        this.$message.success("登录成功");
        this.$router.push("/home");
      } else {
        this.$message({
          message: "登录失败",
          type: "warning",
        });
        // 恢复默认值
        this.ruleForm = {
          username: "admin",
          pass: "123",
        };
      }
    },

3. 在路由界面设置，进入组件前beforeEnter，判断token

const routes =[
{
    path: '/home',
    name: 'Home',
    component: HomeView,
    beforeEnter: async (to, from, next) => {
      // ...
      // 判断需要 去哪个页面
      if (to.path.includes('home')) {
        // 存储token
        const token = localStorage.token;
        if (token) {
          const res = await api.users.getUserInfo();
          if (res.code == 1) {
            store.commit('SET_USER_INFO', { username: res.data.username });
            next();
            return;
          } 
        } else {
        // 不存在token则返回login页面
          alert('你还未登录，请先登录');
          next('/login');
        }
      } else {
        next();
      }
    },
}]

4.配置请求/响应拦截器，处理token

import axios from "axios";
import router from "@/router";
import { MessageBox } from "element-ui";

axios.defaults.baseURL = "http://xxxx:3000";
// axios.defaults.baseURL = "http://localhost:3000";

// 请求拦截器
axios.interceptors.request.use((config) => {
    // config: 请求对象
    // 此处优化：
    // 每发送一个请求，都会给请求头添加一个 token，登录注册也可以添加，
    // 后端会去筛选这些页面，使其携带的token失效
    config.headers.Authorization = localStorage.token;
    return config;
})

// 说明：这里给 axios 设置了一个响应拦截器。
// 当请求的结果在返回给前端的过程中，
// 会先被“响应拦截器”拦截下来，然后响应拦截器中对数据进行处理，
// 最后将 res.data 返回给前端。
axios.interceptors.response.use((res) => {
    return res.data
}, (err) => {
    // 判断返回的错误信息
    if (err && err.response && err.response.status) {
        if (err.response.status === 401) {
        // 使用el-ui
            MessageBox.alert('登录过期', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                // 跳转
                    router.replace('/login');
                }
            });
        }
    }
    // 返回错误信息
    return Promise.reject(err.message);
});

5.配置状态机

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: { 'username': 'QaQ' },
    // userInfo: null,
  },
  getters: {
    username: state => state.userInfo.username,
  },
  mutations: {
    SET_USER_INFO(state, payload) {
      state.userInfo = payload
    }
  },
  actions: {
  },
  modules: {
  }
})

6.在组件进入前，与退出前，如果设置了代码，则需要去优化

• 1.组件优化

// 组件退出前
  beforeRouteLeave(to, from, next) {
  // 如果去 login 则直接放行
    if (to.path.includes("login")) {
      next();
      return;
    } else {
    // 未提交表单切换页面时，提醒用户是否离开
      if (!this.isUpdate) {
        this.$confirm("表单未提交, 是否离开?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            next();
          })
          // 可不写，但会有报错（不影响功能），还有其他优化方法，待续
          .catch(() => {});
      } else {
        next();
      }
    }
  },

• 2.挂载时，会异步执行的方法，改为async写法

  async mounted() {
    await this.subjectsRender();
    await this.classesRender();
    this.renderByStId();
  },

7. 账户等级设置（权限设置）

1