Vue framework of user information storage and verification

VueX

After entering information on the login page, the user sends a POST request to the back end to verify the user name and password. The back end sends sessionId and userInfo, which can be stored in VueX.

this.$http.post(services.LOGIN, this.loginInfo).then((result) = > {
    if (result.data.resultCode == '0') { // Save the user information
    this.$store.commit('setSessionId'.this.loginInfo.userName) / / store sessionId
    this.$store.commit('setUserInfo', {userName: this.loginInfo.userName}) / / store the userInfo
    this.$Message.success('Login successful! ')
    this.$router.push({name: 'Home'})}else { // Login failed
    this.$Message.info(result.data.resultMsg || 'Login failed! ')
    }
    }).catch((e) = > {
    this.$Message.danger('Service request failed')
Copy the code

However, VueX has certain defects, that is, when the page is refreshed, VueX will be initialized, and the user information will be lost. It can be consolidated in another way

sessionStorage

The information in sessionStorage will not be lost when the page is refreshed. When the user logs in successfully, the information will be passed to VueX as well as to sessionStorage

/ / VueX mutation
setSessionId: function (state, sid) {   // To update the session or set it to null
      sid = sid + "" // To a string
      state.sessionId = sid
      window.sessionStorage.setItem("sessionId", sid)
    },
setUserInfo: function (state, userInfo) {   // Use to update userInfo or null
      state.userInfo = userInfo
      window.sessionStorage.setItem("userInfo".JSON.stringify(userInfo))
    },
Copy the code

User Information Verification

How do I check whether a user has logged in to a page

VueRouter

Here we will use the global front-guard in VueRouter to intercept request-first validation whenever a page jump occurs. If user information is not obtained in VueX but can be obtained in sessionStorage, the user information is lost due to page refresh and needs to be written to VueX again.

router.beforeEach((to, from, next) = > {
    if(! to.meta.nonAuth && ! store.state.sessionId) {// The page requires login authentication, and there is no login information in the current store
      // Check whether sessionStorage has a value
      let sessionId = window.sessionStorage.getItem("sessionId")
      let userInfo = window.sessionStorage.getItem("userInfo")

      if (sessionId && userInfo) { // Refresh the page to update the login information to the store
        userInfo = JSON.parse(userInfo)
        store.commit("setSessionId", sessionId)    / / store sessionId
        store.commit("setUserInfo", userInfo)      / / store the userInfo
        next()
      } else {
        router.push({name: "Login"});
      }
    }
    next()
  })
Copy the code

You can meta set whether the page requires login authentication on the Router. If the authentication fails, return to the login page.

{
    path: '/login'.name: 'Login'.component: () = > import(/* webpackChunkName: "welcome" */ './modules/login.vue'),
    meta: {
      nonAuth: true   // The current route does not validate user login status}}Copy the code

The browser comes with a password box

Click on the bottom to show your password, so you remember your password in Chrome and the site’s username and password are exposed here!