vue如何设置cookie拦截

在Vue中设置Cookie拦截的方法主要包括：1、使用Axios拦截器，2、利用Vue Router的守卫功能，3、编写全局混入（Mixin），4、使用第三方库如vue-cookies。

一、使用Axios拦截器

安装Axios：首先，确保你的项目中已经安装了Axios，如果没有，可以使用以下命令进行安装：
```
npm install axios
```

配置Axios拦截器：在你的Vue项目中，找到Axios的配置文件（通常是src/axios.js或src/http.js），并添加拦截器代码。

import axios from 'axios';
// 创建axios实例
const instance = axios.create({
    baseURL: 'http://yourapiurl.com',
    timeout: 1000,
});
// 请求拦截器
instance.interceptors.request.use(config => {
    const token = document.cookie.split('; ').find(row => row.startsWith('token=')).split('=')[1];
    if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response.status === 401) {
        // 这里可以进行重定向到登录页面
        window.location.href = '/login';
    }
    return Promise.reject(error);
});
export default instance;

二、利用Vue Router的守卫功能

设置路由守卫：在Vue Router配置文件中（通常是src/router/index.js），你可以添加全局前置守卫来检查Cookie。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import Login from '@/components/Login';
Vue.use(Router);
const router = new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        }
    ]
});
router.beforeEach((to, from, next) => {
    const token = document.cookie.split('; ').find(row => row.startsWith('token='));
    if (to.name !== 'Login' && !token) {
        next({ name: 'Login' });
    } else {
        next();
    }
});
export default router;

三、编写全局混入（Mixin）

创建全局混入文件：在你的Vue项目中创建一个混入文件（例如src/mixins/authMixin.js），并编写如下代码：

export default {
    created() {
        this.checkAuth();
    },
    methods: {
        checkAuth() {
            const token = document.cookie.split('; ').find(row => row.startsWith('token='));
            if (!token) {
                this.$router.push({ name: 'Login' });
            }
        }
    }
};

在主文件中引入混入：在你的主文件（例如src/main.js）中引入并使用这个混入。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import authMixin from './mixins/authMixin';
Vue.mixin(authMixin);
new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

四、使用第三方库如vue-cookies

安装vue-cookies：使用以下命令安装vue-cookies：
```
npm install vue-cookies --save
```

在项目中引入并使用：在你的主文件（例如src/main.js）中引入vue-cookies，并设置拦截逻辑。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import VueCookies from 'vue-cookies';
Vue.use(VueCookies);
router.beforeEach((to, from, next) => {
    const token = Vue.$cookies.get('token');
    if (to.name !== 'Login' && !token) {
        next({ name: 'Login' });
    } else {
        next();
    }
});
new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

总结：通过使用Axios拦截器、Vue Router的守卫功能、全局混入（Mixin）以及第三方库如vue-cookies，你可以在Vue项目中有效地设置Cookie拦截，确保用户的认证状态。根据项目需求选择适合的方法，并在实际开发中灵活运用。

相关问答FAQs：

1. 什么是cookie拦截？

Cookie拦截是一种技术，用于拦截浏览器发送的HTTP请求中的cookie。当浏览器发送HTTP请求时，服务器会在响应头中返回一个Set-Cookie标头，其中包含一个或多个cookie。然后，浏览器将这些cookie存储在本地，并在每次发送请求时自动将它们附加到请求头中。通过拦截这些cookie，我们可以对其进行处理，例如验证其有效性、修改其值或添加其他信息。

2. Vue中如何设置cookie拦截？

在Vue中，我们可以使用axios来发送HTTP请求，并通过设置拦截器来拦截请求和响应。首先，我们需要安装axios，可以使用npm或yarn进行安装：

npm install axios

接下来，在Vue项目的main.js文件中引入axios和设置拦截器：

import axios from 'axios'

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 拦截请求头，对cookie进行处理
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
  // 对响应数据做些什么
  // 拦截响应头，对cookie进行处理
  const token = response.headers['authorization']
  if (token) {
    localStorage.setItem('token', token)
  }
  return response
}, function (error) {
  // 对响应错误做些什么
  return Promise.reject(error)
})

Vue.prototype.$http = axios

在上面的代码中，我们使用axios的interceptors功能来设置请求拦截器和响应拦截器。在请求拦截器中，我们可以对请求头进行处理，例如将cookie添加到Authorization字段中；在响应拦截器中，我们可以对响应头进行处理，例如从Authorization字段中提取cookie并保存在本地。

3. cookie拦截的应用场景有哪些？

Cookie拦截在Web开发中有很多应用场景，以下是几个常见的应用场景：

用户身份验证：当用户登录时，服务器会返回一个包含用户身份信息的cookie，我们可以通过拦截这个cookie来验证用户身份，并在每次请求中附加该cookie来保持用户登录状态。
权限控制：在某些情况下，我们可能需要对用户的权限进行控制，例如某些用户只能访问特定的页面或执行特定的操作。通过拦截cookie，我们可以获取用户的权限信息，并根据权限进行相应的控制。
跨域请求：由于浏览器的同源策略限制，我们无法直接发送跨域请求。但是，如果我们在拦截器中添加了合适的处理逻辑，就可以实现跨域请求。例如，我们可以在拦截器中添加一个自定义头部，然后在服务器端进行相应的处理。

总的来说，cookie拦截是一个非常有用的技术，可以帮助我们处理和管理浏览器发送的cookie，并实现一些特定的功能和需求。通过在Vue中设置cookie拦截，我们可以更好地控制和管理cookie，提高应用的安全性和可靠性。

文章标题：vue如何设置cookie拦截，发布者：飞飞，转载请注明出处：https://worktile.com/kb/p/3630283