vueでユーザーがログインしているかどうかを判断する方法、ログイン権限

まずstoreフォルダを新規作成し、indexを新規作成する必要があります.js   、 
main.jsにstoreを導入
ステータス情報をlocalStorageに保存

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const key = 'user'
const isLogin = 'isLogin'
const store = new Vuex.Store({
  state () {
    return {
      user: null,
      isLogin: '0'
    }
  },
  getters: {
    getStorage: function (state) {
      if (!state.user) {
        state.user = JSON.parse(localStorage.getItem(key))
        state.isLogin = localStorage.getItem(isLogin)
      }
      return state.user
    }
  },
  mutations: {
    $_setLogin (state, value) {
      state.isLogin = value
      localStorage.setItem(isLogin, value)
    },
    $_setStorage (state, value) {
      state.user = value
      localStorage.setItem(key, JSON.stringify(value))
    },
    $_removeStorage (state) {
      state.user = null
      localStorage.removeItem(key)
    }
  }
})

export default store

そしてmain.js

router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.auth)) {
    if (window.localStorage.isLogin === '1') {
      next()
    } else if (to.path !== '/') {
      next({path: '/login'})
      Vue.prototype.$message.warning('        ,      ！')
    }
  } else {
    next()
  }
})

コンポーネントのフォーム検証に成功した後、ボタンをクリックすると、次のようになります.

this.$message({
  message: '    ',
  type: 'success'
})
this.$store.commit('$_setStorage', {user: this.loginForm.username})
this.$store.commit('$_setLogin', '1')
this.$router.push({name: 'Home'})

routerにmeta:{auth:true}を追加する必要があることを前提とします.

{
    path: '/',
    component: Login,
    name: 'Login',
    meta: {auth: true}
},