在vue中，可以用**Storage（sessionStorage，localStorage）**来存储token，也可以用vuex来存储（但要考虑页面刷新数据消失问题，可以在vuex用Storage），下面介绍用localStorage来存储：

在登录请求成功后，会返回一个token值，用loaclStorage保存

localStorage.setItem('token',res.data.token)

在main.js中设置全局请求头和响应回来的判断

//设置axios请求头加入token
Axios.interceptors.request.use(config => {  
  if (config.push === '/') { 
     } else { 
      		 if (localStorage.getItem('token')) { 
               		//在请求头加入token，名字要和后端接收请求头的token名字一样    
              		 config.headers.token=localStorage.getItem('token');        
       	 	}   
        }  
         return config;  
   },  
   error => { 
      return Promise.reject(error);
   });

//=============================
//响应回来token是否过期
Axios.interceptors.response.use(response => {  
      console.log('响应回来：'+response.data.code)  
        //和后端token失效返回码约定403    
        if (response.data.code == 403) {
                // 引用elementui message提示框       
                ElementUI.Message({        
                    message: '身份已失效',  
                    type: 'err'        
                    });
                //清除token  
                localStorage.removeItem('token ');
                //跳转      
                router.push({name: 'login'});    
            } else { 
                    return response  
            }  
       }, 
  error => { 
     return Promise.reject(error);  
     })

在router中的index设置全局守卫来判断是否存在token，不存在就返回登录页

router.beforeEach((to, from, next) => {
//to到哪儿  from从哪儿离开  next跳转 为空就是放行  
	if (to.path === '/') {
		//如果跳转为登录，就放行 
		next();    
	} else {
	//取出localStorage判断
	      let token = localStorage.getItem('token ');      	     
	      if (token == null || token === '') { 
	             console.log('请先登录')       
	             next({name: 'login'});
	         } else {
	                next();   
	         }   
}});

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

1.第一次登录的时候，前端调后端的登录接口，发送用户名和密码
2.后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
3.前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

ps：存到localStorage是防止页面刷新时，vuex中的数据丢失

4.前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

ps：使用路由守卫，阻止用户没登录就访问页面

5.在全局请求中添加token请求头
6.后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败(例如：token过期)就返回401，请求头中没有token也返回401

ps: 设置全局响应结果，拦截状态码为401的响应结果，并提示用户重新登录

7.重新调取登录接口成功，会在回调函数中将token存储到localStorage和vuex中，覆盖掉上次的token

代码文件如下：
login.vue登录逻辑

login(formName) {
//这里的表单的验证
  this.$refs[formName].validate((valid) => {
    if (valid) {
      this.$axios.post("/user/login", {
          account: this.ruleForm.name,
          password: this.ruleForm.psw,
        }).then((res) => {
        //这里是判断接口是否请求成功
          if (res.data.code === "00000") {
          //接口请求成功将token请求头存到vuex，再进行路由跳转
          //这里接口返回的token名为x-auth-token
            this.$store.commit("changeLogin", res.headers["x-auth-token"]);
            this.$router.push({ path: "/index" });
            this.$message({
              message: "登录成功",
              type: "success",
            });
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        });
    } else {
      console.log("error submit!!");
      return false;
    }
  });
},

store.js存储token

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  //每次都从本地中获取token，这里存的token字段名为Authorization
    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
  },
  mutations: {
  //改变Authorization的值同时改变localStorage的Authorization值
    changeLogin(state, token) {
      state.Authorization = token;
      localStorage.setItem('Authorization', token);
    }
  }
})

router.js路由守卫

import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login.vue'
import Home from './views/home.vue'
Vue.use(Router)
const router = new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
  //当页面路径为/时重定向到/login页面
    {
      path: '/',
      redirect:'/login',
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
     }
  ]
})
//当当前token为空时，不允许访问其他页面，直接跳转到登录页面
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('Authorization');
    if (token === null || token === '') {
      next('/login');
    } else {
      next()
    }
  }
})

export default router

axios.js请求和响应配置

import axios from "axios";
import router from '../router'
import { Notification } from 'element-ui';
let config = {
  baseURL: process.env.NODE_ENV === 'production' ? 'https://www.jettacampus.com/epidemic' : "/api",//配置生产环境路径和开发路径
  withCredentials: true, // 允许跨域
};

const _axios = axios.create(config);

//配置请求的参数
_axios.interceptors.request.use(config => {
  //配置token
  if (localStorage.getItem('Authorization')) {
    config.headers['X-Auth-Token'] = localStorage.getItem('Authorization');
  }
  return config;
}, error => {
  return Promise.reject(error);
})
//配置响应的参数
_axios.interceptors.response.use(response => {
//当token过期或者不存在时，后台返回状态码401，此时页面跳转到登录页面
   if (response.status === 401) {
    router.push({ path: "/login" });
    Notification({
      message: "登录信息已过期,请重新登录",
      type: "error",
    });
    return ;
  }
  return response

}, error => {
  return Promise.reject(error);
});

export default _axios

main.js挂载好store.js、router.js、axios.js三个文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import _axios from './utils/axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.prototype.$axios = _axios
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

参考文章：https://blog.csdn.net/weixin_33462804/article/details/112036794

token可用于登录验证和权限管理。

大致步骤分为：

1. 前端登录，post用户名和密码到后端。
2. 后端验证用户名和密码，若通过，生成一个token返回给前端。
3. 前端拿到token存储到localStorage管理，登录成功进入首页。
4. 之后前端每一次权限操作如跳转路由，都需要判断是否存在token，若不存在，跳转至登录页。
5. 前端之后的每一个对后端的请求都要在请求头上带上token，后端查看请求头是否有token，拿到token检查是否过期，返回对应状态给前端。
6. 若token已过期，清除token信息，跳转至登录页。

登录页 -----Login.vue

<template>
  <!-- 登录 -->
  <div>
    <el-container>
      <el-main>
        <div class="box">
          <el-form
            :model="user"
            :rules="rules"
            ref="user"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="email">
              <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {LoginPostData} from '../../api/index'  // 后端登录接口
export default {
  data() {
    return {
      rules: {
        email: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      user:{
        email:'',
        password:''
      },
      userToken:'', // 用于存储从后台获取的token
    };
  },
  methods:{
      login(){
      // 登录接口
      LoginPostData(this.user.email,this.user.password)
      .then((res)=>{ 
      // 将token存到userToken中     
        this.userToken = res.data.data.token
        // 将token本地存储到回话中
        localStorage.setItem('token', this.userToken);
        // 如果code为200则跳转到NewReport页面
        if(res.data.code === 200){
        this.$router.push({name:'NewReport'})
        this.$message({
          message: '恭喜你，登录成功',
          type: 'success'
        });
        }else{
          this.$message.error(res.data.data);
        }
      })
      .catch(err=>{
        console.log(err);
      })
      }
  },
};
</script>

路由守卫 ----- router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 登录页
  {
    path: '/',
    name: 'Login',
    component: ()=>import('../views/Login/Login.vue'),
  },
  // 首页
  {
    path: '/Home',
    name: 'Home',
    component: ()=>import('../views/Home/Home.vue'),
    children:[
      // 新建报表
      {
        path:'/Home/NewReport',
        name:'NewReport',
        component:()=>import('../views/Home/NewReport.vue')
      },
    ]
  },
]

const router = new VueRouter({
  routes
})

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
//如果去往登录页则放行 
  if (to.path === '/') {
    next();
  } else {
    // 从本地存储里获取token
    let token = localStorage.getItem('token');
    // 判断token是否为空如果为空则跳转到登录页 如果有则放行
    if (token === null || token === '') {
      next({path:'/'});
    } else {
      next();
    }
  }
});

export default router

封装axios 添加请求拦截器 在每次请求之前进行的操作

• 在请求头中添加token ---- api/request.js

// 请求
import axios from 'axios'

// create an axios instance   创建axios实例
const instance = axios.create({
	baseURL: 'http://192.168.3.6:8082', // api 的 base_url
	withCredentials: false//跨域时使用凭证，默认带上cookies
	// timeout: 2000, // request timeout  设置请求超时时间
  })

// 添加请求拦截器，在请求头中加token
instance.interceptors.request.use(
  config => {
  //判断token是否存在
    if (localStorage.getItem('token')) {
    // 在请求头中添加token
      config.headers.token = localStorage.getItem('token');
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  });

export default instance

注意：

鬼知道我当时为了这个找了多半天 哭死

home页面

<template>
  <div>
    <el-link icon="el-icon-switch-button" @click="tuichu">退出登录</el-link>
  </div>
</template>

<script>
export default {
    methods: {
    // 退出
    tuichu() {
      //退出登录，清空token
      localStorage.removeItem('token');
      this.$router.push({ name: "Login" });
    },
  },
};
</script>