Vue gets token to implement token login sample code

// In store.js, add methods to add and delete tokens in mutation import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = { // Globally managed data storage isLogin:'0',
	 ser:null,
	 token:localStorage.getItem('token') ? localStorage.getItem('token'):'', // token
};
export default new Vuex.Store({
	state,
	getters:{ // Listen for data changes getStorage(state){ // Get the login information stored locally if(!state.token){
	        state.token = JSON.parse(localStorage.getItem(key))
	      }
	      return state.token
	    }
	},
	mutations:
		$_setToken(state, value) { // Set storage token
	        state.token = value;
	        localStorage.setItem('token', value);
	    },
	    $_removeStorage(state, value){ // delete token
		      localStorage.removeItem('token');
	    },
	}
})

// login.vue page methods:{
	loginFun(){
		this.$api.post('requested backend interface link',{
				data:{
					userId:this.user, // login name userPwd:this.psw, // login password }
		}).then((res) => {
			if(res.data.status == 200){
				var userInfo = res.data.data;
				this.$store.commit('$_setToken', userInfo.token);
				Toast({ message: 'Login successful', type: 'success', duration: 1500}); // UI pop-up window prompt this.$router.push({ name:'homePage' }); // Jump to the home page } else {
				Toast({ message: res.data.message, duration: 1500}); // UI pop-up window prompt }
		})
	}
}

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store/store'

import PublicFun from './utils/publicFun' // Public method import './mintUi' // Import mintUi components as needed. If necessary, configure them in mintUi.js. import '@/assets/mui/css/mui.css' // mui.css style /* Import axios plug-in */
import axios from 'axios'
Vue.prototype.$http = axios;

// Global routing constructor, determine whether to log in and jump to the page router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.requireAuth)) { // Need to log in if(window.localStorage.token && window.localStorage.isLogin === '1'){
      next()
    } else if (to.path !== '/login') {
      let token = window.localStorage.token;
      if (token === 'null' || token === '' || token === undefined){
          next({path: '/login'})
          Toast({ message: 'It is detected that you are not logged in, please log in before operating!', duration: 1500 })
      }
    } else {
      next()
    }
  } else { // No need to log in next()
  }
})



//Configure public url
Axios.defaults.baseURL = "http://www.sinya.online/api/"
//Add request interceptor axios.interceptors.request.use(
  config =>{
    if (store.state.token) {
      config.headers.common['token'] = store.state.token
    }
    return config;
  },
  error =>{
    //What to do 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:
          localStorage.removeItem('token');
          router.replace({
            path: '/views/login',
            query: {redirect: router.currentRoute.fullPath}//After successful login, jump to the current page being browsed})
      }
    }
  })

Vue.prototype.$publicFun = PublicFun // Mount global public method Vue.prototype.$apps = Apps // app.js public method Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

returnFun(){ // Log out MessageBox.confirm(this.lang.logoutTip).then(action => {
	     this.$store.commit('$_removeStorage'); // Clear login information this.$router.push({
	         name:'login'
	     });
	     Toast({message:this.lang.logoutSuccess, duration: 1500});
	 }).catch(()=>{})
}