vue3点击事件清除token

为了清除token，你需要在Vue3中使用一个函数来实现点击事件的处理。在这个函数中，你可以使用`localStorage`或者`sessionStorage`来存储token，然后将其清除。以下是一个示例代码：

<template>
  <button @click="logout">Logout</button>
</template>

<script>
export default {
  methods: {
    logout() {
      localStorage.removeItem('token');
      // 或者 sessionStorage.removeItem('token');
    }
  }
}
</script>

在这个示例中，`logout`函数被绑定到了`button`元素的点击事件上。当用户点击这个按钮时，`localStorage`中的`token`将被删除。如果你使用的是`sessionStorage`，那么就需要将代码中的`localStorage`替换成`sessionStorage`即可。

相关问题

vue3+typescript将token放在store中

在 Vue 3 + TypeScript 中，将 token 放在 Vuex store 中需要进行一些类型定义的操作。首先需要定义 `state` 中的类型和 `mutation` 的类型：

// auth 模块
interface AuthState {
  token: string | null;
}

interface AuthMutations {
  setToken(state: AuthState, token: string): void;
}

const state: AuthState = {
  token: null,
};

const mutations: AuthMutations = {
  setToken(state, token) {
    state.token = token;
  },
};

接着，定义 `action` 的类型和参数类型：

interface AuthActions {
  login({ commit }: { commit: Commit }, { username, password }: { username: string, password: string }): Promise<void>;
  logout({ commit }: { commit: Commit }): void;
}

const actions: AuthActions = {
  async login({ commit }, { username, password }) {
    // 发送登录请求并获取 token
    const token = 'xxxxx';
    commit('setToken', token);
  },
  logout({ commit }) {
    // 清除 token
    commit('setToken', null);
  },
};

最后，定义 `store` 的类型和模块类型：

import { createStore } from 'vuex';

interface RootState {}

interface Modules {
  auth: {
    state: AuthState;
    mutations: AuthMutations;
    actions: AuthActions;
  };
}

export default createStore<RootState>({
  modules: {
    auth: {
      state,
      mutations,
      actions,
    },
  },
});

这样，就可以在组件中使用类型安全的方式来访问和操作 token 了。例如，在组件中使用 `mapState` 辅助函数来将 token 映射到计算属性中：

import { mapState } from 'vuex';
import { defineComponent } from 'vue';

export default defineComponent({
  computed: {
    ...mapState('auth', ['token']),
  },
});

在模板中，你可以直接使用 `{{ token }}` 来访问 token。在组件的方法中，也可以使用类型安全的方式来调用 `auth` 模块中的 action：

import { mapActions } from 'vuex';
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    ...mapActions('auth', ['login']),
    async handleLogin() {
      await this.login({ username: 'xxx', password: 'xxx' });
    },
  },
});

这样，就可以在 Vue 3 + TypeScript 应用中安全地管理和使用 token 了。

vue.js实现存储token,并带token访问

在 Vue.js 中实现存储 token 并带着 token 访问通常是在客户端进行的，因为浏览器的同源策略限制了服务器端直接操作 localStorage 或 sessionStorage。这里是一个简单的步骤：

1. **设置数据守卫**：
- 在 `src/api/index.js` 或者一个全局的 API 模块中，创建一个函数，用于检查 token 是否存在并设置 HTTP 请求头。例如：

   import axios from 'axios';
   
   export const setTokenHeader = (token) => {
     axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
   };

2. **登录成功时保存 token**：
- 用户登录成功后，将 token 存入本地存储（通常是 localStorage 或 sessionStorage），示例：

   import store from '@/store';
   
   const loginSuccess = async ({ user, token }) => {
     await store.dispatch('setUser', user);
     setTokenHeader(token);
   };

这里假设你在 Vuex Store 的 mutations 中有一个 `setUser`。

3. **全局访问拦截器**：
- 如果需要在每个请求之前检查 token，可以在 Vue 实例的生命周期钩子 `beforeCreate` 或 `mounted` 中添加一个请求拦截器，例如：

   // main.js 或其他入口文件
   import axios from 'axios';
   import { setTokenHeader } from '@/api';

   Vue.prototype.$http = axios.create({
     baseURL: process.env.BASE_API,
     headers: {
       Authorization: ''
     }
   });

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

4. **退出登录时清除 token**：
- 在 `logout` 功能或 Vue Router 的 beforeEach 钩子中，移除 token 和清除 header：

   logout() {
     localStorage.removeItem('token');
     this.$http.defaults.headers.common.Authorization = '';
   }