在Vue中如何使用Cookie操作实例

网络编程 2024/11/16 佚名

3 1 2

大家好，由于公司忙着赶项目，导致有段时间没有发布新文章了。今天我想跟大家谈谈Cookie的使用。同样，这个Cookie的使用方法是我从公司的项目中抽出来的，为了能让大家看懂，我会尽量写详细点。废话少说，我们直接进入正题。

一、安装Cookie

在Vue2.0下，这个貌似已经不需要安装了。因为当你创建一个项目的时候，npm install 已经为我们安装好了。我的安装方式如下：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install

这是我创建好的目录结构，大家可以看一下：

项目结构

二、封装Cookie方法

在util文件夹下，我们创建util.js文件，然后上代码

//获取cookie、
export function getCookie(name) {
 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
 if (arr = document.cookie.match(reg))
  return (arr[2]);
 else
  return null;
}

//设置cookie,增加到vue实例方便全局调用
export function setCookie (c_name, value, expiredays) {
 var exdate = new Date();
 exdate.setDate(exdate.getDate() + expiredays);
 document.cookie = c_name + "=" + escape(value) + ((expiredays == null) "" : ";expires=" + exdate.toGMTString());
};

//删除cookie
export function delCookie (name) {
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval = getCookie(name);
 if (cval != null)
  document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};

三、在HTTP中把Cookie传到后台

关于这点，我需要说明一下，我们这里使用的是axios进行HTTP传输数据，为了更好的使用axios,我们在util文件夹下创建http.js文件，然后封装GET,POST等方法，代码如下：

import axios from 'axios' //引用axios
import {getCookie} from './util' //引用刚才我们创建的util.js文件，并使用getCookie方法

// axios 配置
axios.defaults.timeout = 5000; 
axios.defaults.baseURL = 'http://localhost/pjm-shield-api/public/v1/'; //这是调用数据接口

// http request 拦截器，通过这个，我们就可以把Cookie传到后台
axios.interceptors.request.use(
  config => {
    const token = getCookie('session'); //获取Cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded' //设置跨域头部
    };
    if (token) {
      config.params = {'token': token} //后台接收的参数，后面我们将说明后台如何接收
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);


// http response 拦截器
axios.interceptors.response.use(
  response => {
//response.data.errCode是我接口返回的值，如果值为2，说明Cookie丢失，然后跳转到登录页，这里根据大家自己的情况来设定
    if(response.data.errCode == 2) {
      router.push({
        path: '/login',
        query: {redirect: router.currentRoute.fullPath} //从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error.response.data)
  });

export default axios;

/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {

  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
  })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
  })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
  })
}

四、在登录组件使用Cookie

由于登录组件我用的是Element-ui布局，对应不熟悉Element-ui的朋友们，可以去恶补一下。后面我们将讲解如何使用它进行布局。登录组件的代码如下：

<template>
 <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
      class="demo-ruleForm login-container">
  <h3 class="title">后台管理系统</h3>
  <el-form-item prop="u_telephone">
   <el-input type="text" v-model="account.u_telephone" auto-complete="off" placeholder="请输入账号"></el-input>
  </el-form-item>
  <el-form-item prod="u_password">
   <el-input type="password" v-model="account.u_password" auto-complete="off" placeholder="请输入密码"></el-input>
  </el-form-item>
  <el-form-item style="width:100%;">
   <el-button type="primary" style="width:100%" @click="handleLogin" :loading="logining">登录</el-button>
  </el-form-item>
 </el-form>
</template>

<script>
 export default {
  data() {
   return {
    logining: false,
    account: {
     u_telephone:'',
     u_password:''
    },
    //表单验证规则
    rules: {
     u_telephone: [
      {required: true, message:'请输入账号',trigger: 'blur'}
     ],
     u_password: [
      {required: true,message:'请输入密码',trigger: 'blur'}
     ]
    }
   }
  },
  mounted() {
   //初始化
  },
  methods: {
   handleLogin() {
    this.$refs.AccountFrom.validate((valid) => {
     if(valid) {
      this.logining = true;
//其中 'm/login' 为调用的接口，this.account为参数
      this.$post('m/login',this.account).then(res => {
       this.logining = false;
       if(res.errCode !== 200) {
        this.$message({
         message: res.errMsg,
         type:'error'
        });
       } else {
        let expireDays = 1000 * 60 * 60 ;
        this.setCookie('session',res.errData.token,expireDays); //设置Session
        this.setCookie('u_uuid',res.errData.u_uuid,expireDays); //设置用户编号
        if(this.$route.query.redirect) {
         this.$router.push(this.$route.query.redirect);
        } else {
         this.$router.push('/home'); //跳转用户中心页
        }
       }
      });
     } else {
      console.log('error submit');
      return false;
     }
    });
   }
  }
 }
</script>

五、在路由中验证token存不存在，不存在的话会到登录页

在 router--index.js中设置路由，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import {post,fetch,patch,put} from '@/util/http'
import {delCookie,getCookie} from '@/util/util'

import Index from '@/views/index/Index' //首页
import Home from '@/views/index/Home' //主页
import right from '@/components/UserRight' //右侧
import userlist from '@/views/user/UserList' //用户列表
import usercert from '@/views/user/Certification' //用户审核
import userlook from '@/views/user/UserLook' //用户查看
import usercertlook from '@/views/user/UserCertLook' //用户审核查看

import sellbill from '@/views/ticket/SellBill' 
import buybill from '@/views/ticket/BuyBill'
import changebill from '@/views/ticket/ChangeBill' 
import billlist from '@/views/bill/list' 
import billinfo from '@/views/bill/info' 
import addbill from '@/views/bill/add' 
import editsellbill from '@/views/ticket/EditSellBill' 

import ticketstatus from '@/views/ticket/TicketStatus' 
import addticket from '@/views/ticket/AddTicket' 
import userinfo from '@/views/user/UserInfo' //个人信息
import editpwd from '@/views/user/EditPwd' //修改密码

Vue.use(Router);

const routes = [
 {
  path: '/',
  name:'登录',
  component:Index
 },
 {
  path: '/',
  name: 'home',
  component: Home,
  redirect: '/home',
  leaf: true, //只有一个节点
  menuShow: true,
  iconCls: 'iconfont icon-home', //图标样式
  children: [
   {path:'/home', component: right, name: '首页', menuShow: true, meta:{requireAuth: true }}
  ]
 },
 {
  path: '/',
  component: Home,
  name: '用户管理',
  menuShow: true,
  iconCls: 'iconfont icon-users',
  children: [
   {path: '/userlist', component: userlist, name: '用户列表',  menuShow: true, meta:{requireAuth: true }},
   {path: '/usercert', component: usercert, name: '用户认证审核', menuShow: true, meta:{requireAuth: true }},
   {path: '/userlook', component: userlook, name: '查看用户信息', menuShow: false,meta:{requireAuth: true}},
   {path: '/usercertlook', component: usercertlook, name: '用户审核信息', menuShow: false,meta:{requireAuth: true}},
  ]
 },
 {
  path: '/',
  component: Home,
  name: '信息管理',
  menuShow: true,
  iconCls: 'iconfont icon-books',
  children: [
   {path: '/sellbill',  component: sellbill,  name: '卖票信息', menuShow: true, meta:{requireAuth: true }},
   {path: '/buybill',  component: buybill,  name: '买票信息', menuShow: true, meta:{requireAuth: true }},
   {path: '/changebill', component: changebill, name: '换票信息', menuShow: true, meta:{requireAuth: true }},
   {path: '/bill/editsellbill', component: editsellbill, name: '编辑卖票信息', menuShow: false, meta:{requireAuth: true}}
  ]
 },
 {
  path: '/bill',
  component: Home,
  name: '票据管理',
  menuShow: true,
  iconCls: 'iconfont icon-books',
  children: [
   {path: '/bill/list',  component: billlist,  name: '已开票据列表', menuShow: true, meta:{requireAuth: true }},
   {path: '/bill/info',  component: billinfo,  name: '票据详细页', menuShow: false, meta:{requireAuth: true }},
   {path: '/bill/add',  component: addbill,  name: '新建开票信息', menuShow: true, meta:{requireAuth: true }}

  ]
 },
 {
  path: '/',
  component: Home,
  name: '系统设置',
  menuShow: true,
  iconCls: 'iconfont icon-setting1',
  children: [
   {path: '/userinfo', component: userinfo, name: '个人信息', menuShow: true, meta:{requireAuth: true }},
   {path: '/editpwd', component: editpwd, name: '修改密码', menuShow: true, meta:{requireAuth: true }}
  ]
 }
 ];

const router = new Router({
  routes
});

备注：请注意路由中的 meta:{requireAuth: true }，这个配置，主要为下面的验证做服务。

if(to.meta.requireAuth)，这段代码意思就是说，如果requireAuth: true ,那就判断用户是否存在。

如果存在，就继续执行下面的操作，如果不存在，就删除客户端的Cookie,同时页面跳转到登录页，代码如下。

//这个是请求页面路由的时候会验证token存不存在，不存在的话会到登录页
router.beforeEach((to, from, next) => {
 if(to.meta.requireAuth) {
  fetch('m/is/login').then(res => {
   if(res.errCode == 200) {
    next();
   } else {
    if(getCookie('session')) {
     delCookie('session');
    }
    if(getCookie('u_uuid')) {
     delCookie('u_uuid');
    }
    next({
     path: '/'
    });
   }
  });
 } else {
  next();
 }
});
export default router;

以上就是Cookie在项目中的使用，希望对大家的学习有所帮助，也希望大家多多支持。

Vue使用Cookie,vue,cookie,vue中使用cookie

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“在Vue中如何使用Cookie操作实例”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

在Vue中如何使用Cookie操作实例

Vue2.0如何发布项目实战

vue 怎么创建组件及组件使用方法

评论“在Vue中如何使用Cookie操作实例”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

在Vue中如何使用Cookie操作实例

Vue2.0如何发布项目实战

vue 怎么创建组件及组件使用方法

评论“在Vue中如何使用Cookie操作实例”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存