Token verification login in Vue project (front-end part)

import Vue form 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
 state: {
  token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
 },
 mutotions:
  setToken (state,token) {
   state.token =token;
   localStorage.setItem("token",token.token);
  },
  delToken(state) {
   state.token = '';
   localStorage.removeItem("token");
  }
 }
})

export default store;

npm install vuex --save

localStorage.setItem("token",token.token);

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import promise from 'es6-promise'
import store from './store/index'
promise.polyfill()

Vue.use(ElementUI)
Vue.config.productionTip = false
 

axios.defaults.baseURL = 'http://192.168.80.152:8088'
axios.defaults.headers.post['Content-Type'] = "application/json"
axios.defaults.withCredentials = true
axios.defaults.headers.common['Authorization'] = store.state.token
Vue.prototype.$axios = axios
 

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

// Add request interceptor axios.interceptors.request.use(config => {
// What to do before sending a request // Check if a token exists, and if so, add a token to each page header
  if (store.state.token) {
    config.headers.common['Authorization']=store.state.token.token
  }

  return config;
}, error => {
// Do something with request error return Promise.reject(error);
});

// http response interceptor axios.interceptors.response.use(
  response => {

    return response;
  },
  error => {

    if (error.response) {
      switch (error.response.status) {
        case 401:
          this.$store.commit('del_token');
          router.replace({
            path: '/login',
            query: {redirect: router.currentRoute.fullPath}//After successful login, jump to the current page being browsed})
      }
    }
    return Promise.reject(error.response.data)
  });

import store from './store/index'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

// Add request interceptor axios.interceptors.request.use(config => {
// What to do before sending a request // Check if a token exists, and if so, add a token to each page header
  if (store.state.token) {
    config.headers.common['Authorization']=store.state.token.token
  }

  return config;
}, error => {
// Do something with request error return Promise.reject(error);
});

// http response interceptor axios.interceptors.response.use(
  response => {

    return response;
  },
  error => {

    if (error.response) {
      switch (error.response.status) {
        case 401:
          this.$store.commit('del_token');
          router.replace({
            path: '/login',
            query: {redirect: router.currentRoute.fullPath}//After successful login, jump to the current page being browsed})
      }
    }
    return Promise.reject(error.response.data)
  });

router.beforeEach((to, from, next) => {
  if(to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('token');
    if(token === 'null' || token === '') {
      next('/login');
    }else {
      next();
    }
  }
});

//Introduce something on the export default of this component script tag import { mapMutations } from 'vuex';
//This is the methods part methods: {

      ...mapMutations(['setToken']),
      login(form){


        let _this = this;
        if(form.phone === "" || form.password === ""){
          _this.$message.error("Please enter your phone number or password");
        }else {
          this.$axios.post(`/user/check/login`,_this.form).then(res => {
            var code = res.data.code;
            var mes = res.data.message;
            if(code === 1){
             /* storage.setItem("token",res.data.data);
              _this.token = res.data.data;*/
             // _this.setToken({Authorization: _this.token})
             // console.log("success");
              _this.$message.success('Login successful');
              _this.token = res.data.data;
              _this.setToken({token: _this.token});
              _this.$router.push({path:"/home"});

              var storage = window.localStorage;
              //alert(storage.getItem("token"));

              if(this.$store.state.token) {
                this.$router.push('/home');
                console.log(this.$store.state.token.token);
              } else {
                this.$router.replace('/login');
              }

            }else{
              _this.$message.error(mes);
            }
          }).catch(function(err){
            console.log(err);
            _this.$message.error("Login error, please contact the program developer!!");

          })
        }

      }
     }

let _this = this;

 _this.setToken({token: _this.token});

...mapMutations(['setToken']),