koa2实现token vue如何使用token

koa2可以使用jsonwebtoken生成token，示例代码如下：

const jwt = require("jsonwebtoken");

const user = { username: "test_user" };
const token = jwt.sign(user, "my_secret_key");

console.log(token);

在Vue中使用token，可以将token存储在浏览器的localStorage中，在每次请求时从localStorage中获取token并加入请求头中。示例代码如下：

// 存储token
localStorage.setItem("token", "your_token_here");

// 获取token
const token = localStorage.getItem("token");

// 添加请求头
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;

需要注意的是，每次请求都应该将token加入请求头中，可以在axios的拦截器中实现该功能。

// 添加拦截器
axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.common["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
1. 安装vuex：使用npm或yarn安装

```bash
npm install vuex --save

2. 引入vuex依赖

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3. 创建store实例

const store = new Vuex.Store({
  state: {
    token: null
  },
  mutations: {
    setToken(state, payload) {
      state.token = payload
    }
  }
})

4. 在需要的组件中使用

import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState({
      token: state => state.token
    })
  },
  methods: {
    ...mapMutations([
      'setToken'
    ]),
    login() {
      // 登录成功后调用setToken方法保存token
      this.setToken('tokenValue')
    }
  }
}

5. 在需要使用token的组件中获取token

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      token: state => state.token
    })
  },
  mounted() {
    // 根据token判断用户是否登录
    if (!this.token) {
      this.$router.push('/login')
    }
  }
}