Vue3 + ts 使用 Vuex.Store 保存 token

1. 创建一个 store.ts

// store.ts
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'

// 为 store state 声明类型
export interface State {
  token: string
}

// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    token : '1222'
  },
  mutations: {
    increment (state, value) {
      // 变更状态
      state.token = value
    }
  }
})

2. 全局注册 store

import {createApp} from 'vue'
import App from './App.vue'
import * as VueRouter from 'vue-router';
import routes from "./config/route";
import Vant from 'vant';
import 'vant/lib/index.css';
import '../global.css';
import { store, key } from './store'

const app = createApp(App);
app.use(Vant);

const router = VueRouter.createRouter({
    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHistory(),
    routes, // `routes: routes` 的缩写
})

app.use(store, key);

app.use(router);
app.mount('#app');

3. 将登录成功之后的 token 保存到 store

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import {mapMutations, mapState} from 'vuex';
import { useStore } from 'vuex'
import { store, key } from '../store/index'


const sendCode = async () => {
  const res = await myAxios.post('/user/code?phone='+phone.value, {
    
  })
  console.log(res, '发送验证码');
  if (res.success && res.data) {
    Toast.success('验证码成功');
  
  } else {
    Toast.fail(res.errorMsg);
  }
};


const onSubmit = async () => {
  const res = await myAxios.post('/user/login', {
    phone: phone.value,
    code: code.value,
  })
  console.log(res, '用户登录');
 

  if (res.data.success) {
    Toast.success('登录成功');

    const token = res.data.data;
    console.log("token = " + token)

    // 保存token到Vuex store中
    store.commit('increment', token);
    

  } else {
    Toast.fail(res.data.errorMsg);
  }
};


</script>

4. 请求拦截加上 token

myAxios.interceptors.response.use(
  function(response) {
  
    if(response.data.code === 401) {
        // 无权限，跳回登录页面
        const redirectUrl = window.location.href;
        window.location.href = '/user/login?redirect=${redirectUrl}'
    }
    return response;
  },
  function(error) {
    // Do something with response error
    console.info(error)
    console.info(error.response.status)
    if(error.response.status === 401) {
        // 无权限，跳回登录页面
        const redirectUrl = window.location.href;
        window.location.href = '/user/login?redirect=${redirectUrl}'
    }
    return Promise.reject(error);
  }
);