vue框架+axios实现登录守卫（验证token是否存在以及过期)

vue框架+axios实现登录守卫（token)

做项目的时候需要用到登录成功跳转到首页的功能，并且首页没有登录需要自动跳蛛到登录，这就要求设置axios，配置请求拦截器、响应拦截器。把学到的笔记记录并且下来，方便下次回忆。
首先前后端数据库服务器等我已经配置好了，单个页面都可以使用的。

这次用到了本地存储，当登录成功后,本地存储会保存token,实现跨域登录。当token失效后，会删除本地存储中的token，则需要跳转到登录页面。
这是服务器端的目录

这里是vue框架的目录

项目依赖

login.vue

<template>
  <div class="login">
    <el-form
      :model="loginUser"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="loginUser"
      
    >
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="loginUser.tel" autocomplete="off"></el-input>
      </el-form-item>
       <el-form-item label="密码" prop="password">
        <el-input  type="password"  v-model="loginUser.password"></el-input>
      </el-form-item>
           
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
   
  name: "login",
  data: function() {
   
    return {
   
      loginUser: {
   
        tel: "12323452345",
        password: "123456"
        //这里写成默认方便测试，可以自己清空，输入数据库的东西
      },
      rules: {
   
        tel: [
          {
    required: true, message: "手机号不能为空", trigger: "blur" }, //required,必须不能为空
          //blur,光标离开失去焦点
          {
    min: 11, max: 11, message: "手机号码必须是11位", trigger: "blur" }
        ],
        password: [
          {
    required: true, message: "密码不能为空", trigger: "blur" }, //required,必须不能为空
          //blur,光标离开失去焦点
          {
    min: 6, max: 6, message: "密码必须是6位"