vue如何拿到登录token

在Vue中获取登录token的步骤主要有以下几个：1、通过登录接口获取token；2、将token存储在本地；3、在每次请求时携带token。以下将详细描述如何实现这些步骤。

一、通过登录接口获取token

发送登录请求：首先，需要通过Axios等HTTP库向后端发送登录请求，一般包括用户名和密码。
解析响应数据：在请求成功后，从响应数据中提取token。

例如：

import axios from 'axios';
const login = async (username, password) => {
  try {
    const response = await axios.post('/api/login', { username, password });
    const token = response.data.token;
    return token;
  } catch (error) {
    console.error('Login failed', error);
  }
};

二、将token存储在本地

选择存储方式：可以选择将token存储在localStorage、sessionStorage或者Vuex中。
存储token：获取到token后，将其存储在选定的位置。

例如，使用localStorage：

const storeToken = (token) => {
  localStorage.setItem('authToken', token);
};

三、在每次请求时携带token

设置请求拦截器：使用Axios的请求拦截器，在每次发送请求前将token添加到请求头中。
携带token：确保每次请求都能携带token，以便服务器验证用户身份。

例如：

axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

四、完整示例

以下是一个完整的示例，展示了如何在Vue项目中获取并使用登录token：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
Vue.config.productionTip = false;
// 登录函数
const login = async (username, password) => {
  try {
    const response = await axios.post('/api/login', { username, password });
    const token = response.data.token;
    storeToken(token);
    return token;
  } catch (error) {
    console.error('Login failed', error);
  }
};
// 存储token函数
const storeToken = (token) => {
  localStorage.setItem('authToken', token);
};
// 设置请求拦截器
axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
new Vue({
  render: (h) => h(App),
}).$mount('#app');

五、进一步优化与安全考虑

安全存储：尽量避免将token存储在localStorage或sessionStorage，可以考虑使用更安全的存储方式，如HttpOnly cookies。
刷新token：实现token的刷新机制，确保token过期后能够自动获取新的token。
错误处理：添加全局的错误处理机制，处理token相关的错误，如token失效或未授权访问。

总结来说，Vue中获取登录token主要分为三个步骤：1、通过登录接口获取token；2、将token存储在本地；3、在每次请求时携带token。通过这些步骤，可以确保用户的登录状态在整个应用中保持一致和安全。进一步的优化和安全措施将有助于提高应用的安全性和用户体验。