非Vuex实现的登录状态判断封装实例代码

下面是“非Vuex实现的登录状态判断封装实例代码”的完整攻略：

什么是非Vuex实现的登录状态判断？

在一些小型项目中，为了简化代码，我们可能不想使用vuex来进行状态管理，那样会显得冗余和臃肿。这时候，可以通过非Vuex的方式来实现登录状态的判断。

实现非Vuex的登录状态判断

我们可以通过localStorage来存储用户的登录信息，并提供一个判断用户是否登录的方法。

存储用户登录信息

我们把用户的登录信息（如token值、用户ID、角色等）存在localStorage中，可以在用户登录后调用如下函数来存储：

export function setToken(token) {
  localStorage.setItem('token', token)
}

获取用户登录信息

通过如下函数可以获取用户的token:

export function getToken() {
  return localStorage.getItem('token')
}

判断用户是否登录

有了存储和获取用户登录信息的函数，我们还需要提供一个判断用户是否登录的方法：

export function isLogin() {
  const token = getToken()
  return token !== null && token !== undefined && token.trim() !== '';
}

这里我们通过判断localStorage中是否存在token来判断用户是否已经登录。

示例说明

在一个vue项目中，我们可以通过如下方式来进行使用。

import { setToken, getToken, isLogin } from '@/utils/auth.js'

export default {
  name: 'login',
  methods: {
    handleLogin() {
      // 登录处理过程
      // ...
      // 登录成功后存储token
      setToken('abcd1234')
      // 跳转到首页
      this.$router.push('/')
    }
  },
  created() {
    if (isLogin()) {
      this.$router.push('/')
    }
  }
}

在上述例子中，我们首先在登录成功后通过setToken方法保存token值，然后跳转到首页。在isLogin方法中，我们通过getToken方法来获取localStorage中的token值，并判断其是否为空来判断用户是否已经登录。在created生命周期中，我们首先判断用户是否已经登录，若已经登录则跳转到首页。

这是一个简单的非Vuex实现的登录状态判断封装实例代码。