vue 中的cookie使用

川长思鸟来 2022-05-24 09:35 301阅读 0赞

### 一，安装饼干 ###

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

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

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

![70][]

项目结构

### 二，封装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中把饼干传到后台 ###

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

![70 1][]![70 2][]

![70 3][]

四，在登录组件使用的Cookie

登由于录组件我用的的英文元素的UI布局，对应不熟悉元素的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>

### 五，在路由中验证令牌存不存在，不存在的话会到登录页 ###

在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;

[70]: /images/20220524/2dae649a663f468aab438d9b453090cd.png
[70 1]: https://img-blog.csdn.net/2018052418423498?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY0NjcxNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220524/88281c07681c4327856c81fef477f592.png
[70 3]: /images/20220524/555784b436134549a3fed14c6c14df9f.png