1.在第一次登录的时候前端调用后端的接口，把用户名和密码传给后端。

2、后端收到请求，验证用户名和密码，验证成功后，返回给前端一个token值。

3、前端收到后端传给的token值，将token存储在sessionStorage。（本次项目用的是vue框架）

4、前端每次路由跳转，就判断sessionStorage中是否有token，如果没有就跳转登录页面，如果有就跳转到相应的页面。

5、分装一公用的请求接口方法，每次请求调用后端接口，都在请求头中带上token

<template>
  <div class="login">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <input type="text" name="" id="" placeholder="请输入用户名" v-model="name"/>
    <input type="text" name="" id="" placeholder="请输入密码" v-model="pwd"/>
    <button @click="login">登录</button>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: "HomeView",
  components: {
    // HelloWorld
  },
  data () {
    return {
      name:'asd',
      pwd:'asd',
    }
  },
  methods: {
    login() {
      this.axios
        .post("http://localhost:3000/login", {
          username: this.name,
          password: this.pwd,
        })
        .then((res) => {
          console.log(res);
          // 存储token值
          window.sessionStorage.setItem("token", res.data.token);
          this.$router.push("/xuan");
        });
    },
  },
};
</script>

在main.js中添加请求拦截器，并在请求头中添加token。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 请求头里面放上token信息
  let token = sessionStorage.getItem('token');
  if(token){
    config.headers['token'] = token
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});