检查用户的身份验证信息localStorage注意登出时要清除这个信息

一、检查用户的身份验证信息

当用户登录时，服务器会发个“通行证”（比如JWT）或“小纸条”（会话信息）。每次页面打开时，我们都要看看这“通行证”或“小纸条”在不在，来判断用户是不是已经登录了。

存储令牌或会话信息

把“通行证”或“小纸条”藏起来，可以放在localStorage或sessionStorage里。

比如：

localStorage.setItem('token', 'abc123');

检查令牌或会话信息

每次要检查登录状态的时候，就去看看storage里有没有“通行证”或“小纸条”。

比如：

let token = localStorage.getItem('token');

二、使用Vuex存储登录状态

Vuex就像是Vue的“大脑”，可以用来存放和管理全局信息，比如登录状态。

设置Vuex状态

在Vuex的store里定义一个变量，专门用来存登录状态。

比如：

state: {

  isLoggedIn: false

}

更新登录状态

用户登录和登出的时候，用mutations来更新这个状态。

比如：

mutations: {

  login() {

    state.isLoggedIn = true;

  },

  logout() {

    state.isLoggedIn = false;

  }

}

检查登录状态

需要检查登录状态的地方，就到Vuex的store里去找这个变量。

比如：

if (this.$store.state.isLoggedIn) {

  // 用户已登录

}

三、路由守卫进行验证

Vue Router有“导航守卫”这个功能，可以在用户还没到某个页面之前就先检查一下。

定义路由守卫

在路由配置里，可以用路由守卫来检查用户是否登录。

比如：

beforeEach((to, from, next) => {

  if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {

    next('/login');

  } else {

    next();

  }

});

全局导航守卫

全局的导航守卫可以在每次导航前都检查。

比如：

router.beforeEach((to, from, next) => {

  // ...

});

四、结合多种方法实现

通常，我们会在项目中用好几种方法来保证登录状态的准确性。

统一管理状态

用Vuex来管理登录状态，然后在路由守卫里检查，确保用户每次导航都是安全的。

比如：

router.beforeEach((to, from, next) => {

  if (!this.$store.state.isLoggedIn) {

    next('/login');

  } else {

    next();

  }

});

保持状态同步

用户登录或登出时，更新Vuex的状态和storage里的信息。

比如：

methods: {

  login() {

    this.$store.commit('login');

    localStorage.setItem('token', 'abc123');

  },

  logout() {

    this.$store.commit('logout');

    localStorage.removeItem('token');

  }

}

通过这些方法，我们可以有效地判断Vue应用中用户的登录状态。主要就是：检查身份验证信息、用Vuex存储状态、路由守卫验证。结合这些，能确保用户在访问受保护页面时，登录状态被正确验证。

相关问答FAQs