VUE implements token login verification

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
  },
  mutations:
    setToken (state,token) {
      state.token =token;
      localStorage.setItem("token",token.token); //Store token
    },
    delToken(state) {
      state.token = '';
      localStorage.removeItem("token"); //Delete token
    }
  }
})

<input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="password"/>

<script>
  import { mapMutations } from 'vuex';
  export default {
    name: "managerLogin",
    data() {
      return {
        username:'', //usernamepassword:'', //password};
    },
    methods:{
      ...mapMutations(['setToken']),
      login:function() {
        if (this.username === '' || this.password === '') {
          alert("Account or password cannot be empty!");
        }
        else {
          //According to the API interface to obtain the token
          this.$ajax.get('http:///api/wx/Public/login', {
            params: { //Incoming parameters username: this.username, password: this.password, device_type: "mobile"
            }
          }).then(
            res => {
              console.log(res.data);
              if(res.data.code===1) { //If code=1, verification is successful this.setToken({token: res.data.data.token}); //Method for assigning token in store this.$router.push('/managerHome');
              }
              else{
                alert(res.data.msg); //Popup error message}
            }).catch(error => {
            alert('Interface connection error');
            console.log(error);
          });
 
        }
      }
  }
</script>

<script>
    import {mapMutations} from "vuex";
    export default {
      name: "manager_infor",
      methods:{
        ...mapMutations(['delToken']),
        exit:function(){
          this.delToken({token:''});
          this.$router.push('/managerLogin');
        }
      }
    }
</script>

router.beforeEach((to, from, next) => {
  if (to.path === '/managerLogin') { //If the page to be jumped is the login interface next(); //jump directly}
  else if (to.path === '/managerHome'){ //If the page to be jumped is the personal interface let token = localStorage.getItem('token'); //Get the token value stored locally if (token===null||token===''){ //If the token is empty, the verification fails and jumps to the login page next('/managerLogin');
    }
    else{ //If it is not empty, the verification is successful next();
    }
  }
  else{
    next();
  }
});
 
export default router;

import axios from "axios";
import store from './store/main';
Vue.prototype.$ajax = axios
 
new Vue({
  el: '#app',
  router,
  store, //store needs to be added components: { App },
  template: '<App/>'
})
 
//Request interceptor axios.interceptors.request.use(config => {
// Check if a token exists. If so, add the token to the header of each page.
  if (store.state.token) {
    
    config.headers.common['XX-Token']=store.state.token //The XX-Token here should be written according to the name of the request header in the login interface}
 
  return config;
}, error => {
// Request error return Promise.reject(error);
});
 
//response interceptor axios.interceptors.response.use(
  response => {
    return response;
  },
  
  error => { //By default, all errors except 2XX are considered errors if (error.response) {
      switch(error.response.status){
        case 401:
          this.$store.commit('delToken');
          router.replace({ //Jump to the login page path: '/managerLogin',
            query: { redirect: router.currentRoute.fullPath } // Take the redirected route path as a parameter and jump to the route after successful login});
      }
    }
    return Promise.reject(error.response);
  }
);