The practical process of login status management in the vuex project

//Create a new store directory under the src directory and create index.js as follows //Create a data warehouse import Vuex from 'vuex';
import vue from 'vue';
import loginUser from 'loginUser.js'
Vue.use(Vuex)

const store = new Vuex.Store({
    modules: { //modules can put different states in a separate object loginUser //Whether you are logging in},
    strict: true, //Only allow state changes through mutations });

//Create a loginUser.js and create its state/mutations/actions

//The state that needs to be maintained state: {
       loading: false, //Login status user: null, //Currently logged in user},
//Calculated property getters: {
       status(state) {
           if (state.loading) {
               return 'loading'
           } else if (state.user) {
               return 'login'
           } else {
               return 'unLogin'
           }
       }
   },
 
 //Change loading and user status mutations: {
       //Set loading
       setLoading(state, msg) {
           state.loading = msg
       },
       //Set user setUser(state, msg) {
           state.user = msg
       }
   },
 
 //Submit the changed status in actions actions: {
       //The login method ctx is equivalent to store
       async login(ctx, msg) {
           //Set the login status to true
           ctx.commit("setLoading", true)
           const result = await xxxapi.login(msg.loginId, msg.loginPassword)
           if (result) {
               //Login successful ctx.commit('setUser', result)
               //After successful login, the login status is set to false
               ctx.commit('setLoading', false)
           }
           //Return whether the login is successful return result
       },
       //Judge whether you have logged in async isLogin(ctx) {
           //Logging in ctx.commit('setLoading', true)
           //Call the interface to see if it is logged in const result = await xxxapi.isLogin();
           ctx.commit('setUser', result);
           ctx.commit('setLoading', false)
       },
       //Logout async logout(ctx) {
           ctx.commit('setLoading', false)
           await xxxapi.logout();
           ctx.commit('setUser', null);
           ctx.commit('setLoading', false)
       }
   },

<button :disabled="loading">{{ loading ? 'loading...' : 'Log in' }}
</button>
computed: {
//Encapsulate loading in computed, so you don’t have to write this.$store.state.loginUser every time you call it. // loading() {
    // return this.$store.state.loginUser.loading;
    // }
    // Optimization // Auxiliary function // import {mapState} from "vuex"
    ...mapState({
      loading: (state) => state.loginUser.loading
    })
  }

async handleSubmit() {
      const result = await this.$store.dispatch("loginUser/login", {
        loginId: this.loginId,
        loginPassword: this.loginPassword
      });
      if (result) {
        // Login successful route jump const path = this.$route.query.url || '/'
        this.$router.push(path)
      }
    },

  <!-- Display page login status-->
<span v-if="status === 'loading'">Logging in, please wait...</span>
​
<template v-else-if="status === 'login'">
    <span>Currently logged in user {{user.name}}</span>
    <span @click="handleLogout">Logout</span>
</template>
​
<router-link to="/login" v-else>
        Login</router-link>
  computed: {
...mapGetters("loginUser", ["status"]),
...mapState("loginUser", ["user"]),
}

async handleLogout(){
    await this.$store.dispatch("loginUser/logout")
    //Jump to the login page this.$route.push(/xxx)
},

The login status needs to be checked every time the page is refreshed, and this needs to be determined in main.js, which is when vue is created.
store.dispatch('loginUser/isLogin')

//import Home from "./xx/xx.vue" in routes.js
export default[
{
      path:"/home",
    component:Home,
    meta: {
      auth: true, //pages that require permissions to access}
}
]
Set the route guard in index.js router.beforeEach((to, from, next) => {
    if (to.meta.auth) {
        // Login permission is required to access const result = store.getters["loginUser/status"]
        if (result === 'loading') {
            // Loading status, I don't know if you are logged in // Jump to a page that is logging in, and monitor whether the login is successful on the page, otherwise it will stay here forever // And when the route jumps, you must record where you came from before, otherwise you don't know which page to jump to next({
                path: '/loading', //Go to the [Logging in] page query: {
                    url: to.fullpath
                }
            })
        } else if (result === 'login') {
            // Login successfulnext();
        } else {
            // Not logged in this.$message.info('You need to log in');
             next({
                path: '/login', //Go to the [Logging in] page query: {
                    url: to.fullpath
                }
            })
        }
    } else {
        //Pages that can be accessed without login permission next()
    }
})

created() {
  this.unWatch = this.$watch(() => this.$store.getters["loginUser/status"], (status) => {
    console.log('current status', status);
    if (status !== 'loading'){
      this.$router.push(this.$route.query.url || '/home').catch(() => {}
    }
  }, {
    immediate: true
  })
},
destroyed() {
  //Cancel monitoring this.unWatch()
}