axios拦截器获取pinia存储的token

可以通过以下代码获取pinia存储的token：

import { createPinia } from 'pinia';
import axios from 'axios';

const pinia = createPinia();

axios.interceptors.request.use((config) => {
  const token = pinia.state.token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

这里假设你已经在pinia的state中存储了token。在axios的拦截器中，我们可以通过pinia.state.token获取到存储的token，并将其添加到请求头中。

相关问题

如何在Vue项目中通过Axios拦截器和Vuex进行Token验证和页面权限控制？

在Vue.js应用中，实现用户权限控制和Token验证通常涉及多个步骤。首先，我们需要在定义路由时添加一个自定义字段`requireAuth`来标识需要用户登录才能访问的路由。然后，通过Vue Router的`beforeEach`全局前置守卫来拦截路由跳转，判断用户是否登录，如果未登录则重定向至登录页面。对于HTTP请求，我们利用Axios的拦截器功能在发送请求前检查是否存在Token，并将其添加到请求头中。在响应拦截器中，我们处理可能出现的401 Unauthorized错误，清除Token并引导用户重新登录。这样，我们确保了只有授权用户能够访问受保护的页面和数据。为了更好地理解和实现这一过程，你可以参考这篇资料：《Vue实现Axios拦截与Token验证：页面跳转策略》。这篇文章详细讲解了Vue项目中axios拦截器的使用方法，以及如何结合Vuex进行Token管理和页面跳转策略的实现，非常适合解决你当前遇到的问题。

参考资源链接：[Vue实现Axios拦截与Token验证：页面跳转策略](https://wenku.csdn.net/doc/645c91e695996c03ac3c358d?spm=1055.2569.3001.10343)

在Vue项目中，如何结合Axios拦截器和Vuex实现Token验证和页面权限控制？

在Vue项目中实现Token验证和页面权限控制，首先需要在路由定义中添加权限验证的标记。然后利用Vue Router的前置守卫进行路由访问权限的控制。接着通过Axios的请求和响应拦截器处理HTTP请求中的Token验证和错误处理。具体步骤如下：

参考资源链接：[Vue实现Axios拦截与Token验证：页面跳转策略](https://wenku.csdn.net/doc/645c91e695996c03ac3c358d?spm=1055.2569.3001.10343)

1. 在Vue Router中定义路由时，为需要权限验证的路由添加一个`meta`字段，比如`requireAuth`，来标识这些路由需要用户登录才能访问。示例如下：

{
  path: '/admin',
  component: Admin,
  meta: { requireAuth: true }
}

2. 使用Vue Router的全局前置守卫`beforeEach`来判断用户是否具有访问权限。根据路由的`meta`信息和Vuex中存储的token状态，决定是否允许访问或者跳转到登录页面：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) {
    if (store.state.token) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

3. 在Axios的请求拦截器中，每次发送请求前检查是否存在token，并将其添加到请求头中，例如：

axios.interceptors.request.use(config => {
  if (store.state.token) {
    config.headers['Authorization'] = `Bearer ${store.state.token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

4. 在Axios的响应拦截器中，处理服务器返回的401错误，清除本地token，并引导用户跳转到登录页面：

axios.interceptors.response.use(response => response, error => {
  if (error.response.status === 401) {
    ***mit('logout');
    router.replace({
      path: 'login',
      query: { redirect: router.currentRoute.fullPath }
    });
  }
  return Promise.reject(error);
});

通过上述步骤，你可以有效地控制用户在Vue项目中的页面访问权限，并进行token的验证和刷新。在实际应用中，你可能还需要结合Vuex的状态管理和持久化存储，以及与后端服务的安全交互，来完善整个用户认证授权流程。建议阅读《Vue实现Axios拦截与Token验证：页面跳转策略》以获取更多深入的策略和最佳实践。

参考资源链接：[Vue实现Axios拦截与Token验证：页面跳转策略](https://wenku.csdn.net/doc/645c91e695996c03ac3c358d?spm=1055.2569.3001.10343)