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
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
token: null
},
mutations: {
setToken(state, payload) {
state.token = payload
}
}
})
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState({
token: state => state.token
})
},
methods: {
...mapMutations([
'setToken'
]),
login() {
// 登录成功后调用setToken方法保存token
this.setToken('tokenValue')
}
}
}
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
token: state => state.token
})
},
mounted() {
// 根据token判断用户是否登录
if (!this.token) {
this.$router.push('/login')
}
}
}