Login of Vue management system.

First, a login component, Login.vue, requests to verify whether the user name and password are correct. If they are correct, save the user name and password to the state in the store.

Then, judge whether there is login information in the state by visiting each page. If not, skip to the login page and use router.beforeEach()

Main code:

After obtaining the user name and password from the page, click the login button to perform the following functions

        loginCheck () {
            // accout login information obtained for the page
            var name=this.account.username;
            //Saved password
            var pass=this.account.password;
            // Judge whether it is empty
            if(name==''||name==null){
              this.$alert('Please enter the correct user name')
              return
            }else if(pass==''||pass==null) {
              this.$alert('Please enter the correct password')
              return
            }
            let para = {
                login_name: name
            }

            // Call the interface, check the login, write all interface services into api.js here, if there is no direct axis.get (route, parameter)
            this.$api.get_user_login_info(para)  
            .then(res => {
                console.log(res.data.data)
                if (res.data.data.length > 0) {
                    if (pass == res.data.data[0].login_password) {
                        let user = {
                            Loginedname: res.data.data[0].login_name,
                            UserId:res.data.data[0].user_id
                        }
                        // Call the store's method LOGIN with commit and pass in the parameter user
                        this.$store.commit('LOGIN',user)

                        // Jump
                        this.$router.push("/DataShow")
                    } else {
                        this.$alert('Login failed! Please check the user name and password')
                    }
                } else {
                    this.$alert('There is no such user')
                }
            })
            .catch(err => {
                console.log(err);
            });
        }

 

store.js

state can be understood as a variable, which you need to use globally.

Mutations are equivalent to functions. Functions that handle state variables that reference functions within mutations in other places must have this.$store.commit('LOGIN ') with at most one parameter.

getters are also functions that access state.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
 
const state = {
 // Login status is not logged in
 logined: false,
 // User information data
 Loginedname: null,
 UserId: null,
}
 
var mutations={
 LOGIN (state,user) {
  // Sign in
  // Let's change the login status to login
  // If only the value in state is changed, it will be lost after forced refresh, and the data will be added to sessionStorage.
  sessionStorage.setItem("Loginedname", user.Loginedname)  
  sessionStorage.setItem("UserId", user.UserId)  
  sessionStorage.setItem("logined", true) 
  state.Loginedname = user.Loginedname
  state.UserId = user.UserId
  state.logined = true
 },

 // Logout
 LOGOUT (state) {
  // This same principle
  sessionStorage.removeItem("Loginedname")
  sessionStorage.removeItem("UserId")  
  sessionStorage.removeItem("logined")
  state.Loginedname = ''
  state.UserId = ''
  state.logined = false
 }
}
var getters={
  isLogin (state) {
      if (!state.logined) {    
          state.logined=sessionStorage.getItem('logined');   //Read status from sessionStorage
          state.Loginedname=sessionStorage.getItem('Loginedname');
          state.UserId=sessionStorage.getItem('UserId');
      }
      return state.logined
  }
}
export default new Vuex.Store({
 getters,
 state,
 mutations
})

main.js

Be sure to reference it in main.js

Finally, before visiting each page, you must check whether the login information exists, and also call router.beforeEach in main.js.

Note: router.beforeEach must be used before Vue.use(Router), otherwise, the first visit will not be checked

Login complete.