vue项目中存储与使用后端传递过来的token

在Vue项目中使用后端传递过来的token需要进行以下几个步骤：

1. 发送登录请求，获取token

在登录页面，用户输入用户名和密码后，向后端发送登录请求。如果用户名和密码验证成功，后端返回一个token给前端。

axios.post('/login', {
  username: 'username',
  password: 'password'
})
.then(response => {
  const token = response.data.token
  // 存储token
  localStorage.setItem('accessToken', token)
})
.catch(error => {
  console.error(error)
})

在获取到token后，可以使用localStorage或者cookie进行存储。这里使用localStorage进行存储。

2. 在请求中添加token

在请求后端API的时候，需要将token添加到请求头中。

axios.get('/api/data', {
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('accessToken')
  }
})
.then(response => {
  console.log(response.data)
})
.catch(error => {
  console.error(error)
})

在上面的示例中，将token添加到请求头中的方式是在headers对象中添加Authorization字段。其中Bearer是一个常见的身份验证方案，用于标识身份验证信息的类型。

示例1: 在路由守卫中检查token是否过期

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('accessToken')
  if (to.meta.requiresAuth && !token) {
    next('/login')
  } else if (to.meta.requiresAuth && token) {
    const decodedToken = jwt.decode(token)
    const currentTime = Date.now() / 1000
    if (decodedToken.exp < currentTime) {
      localStorage.removeItem('accessToken')
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

在示例中，设置了一个路由守卫，用于检查用户的登录状态。如果用户没有登录，路由会被重定向到登录页面。如果用户已经登录，守卫会检查token是否过期。如果过期了，则将token从localStorage中删除，并将路由重定向到登录页面。

示例2: 在Vuex中管理token

const state = {
  accessToken: localStorage.getItem('accessToken') || ''
}

const mutations = {
  setAccessToken(state, token) {
    state.accessToken = token
    localStorage.setItem('accessToken', token)
  }
}

const actions = {
  login({ commit }, { username, password }) {
    return axios.post('/login', { username, password })
      .then(response => {
        const token = response.data.token
        commit('setAccessToken', token)
      })
  }
}

const getters = {
  isAuthenticated: state => Boolean(state.accessToken)
}

在示例中，使用了Vuex来管理token。在state中定义了一个accessToken的状态，用于存储token。在mutations中定义了一个setAccessToken的函数用于设置token值，并使用localStorage进行存储。在actions中定义了一个login函数，在用户成功登录之后，会向后端发送登录请求，并将返回的token值通过commit方法调用setAccessToken进行设置。在getters中设置了一个isAuthenticated计算属性，用于判断用户是否已经登录。

通过上述方式，我们可以完整的实现在Vue项目中存储和使用后端传递过来的token。