二、封装Cookie方法

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

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//获取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等方法，代码如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

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的朋友们，可以去恶补一下。后面我们将讲解如何使用它进行布局。登录组件的代码如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<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中设置路由，代码如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

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,同时页面跳转到登录页，代码如下。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

//这个是请求页面路由的时候会验证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在项目中的使用

Logo
松山湖开发者村综合服务平台

助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台

更多推荐

cover

Hadoop、Spark 和大数据处理_数据清洗,spark,nosql,hadoop能干什么

avatar 松山湖开发者村综合服务平台
cover

Android-开发面试-“68”-问

avatar 松山湖开发者村综合服务平台
cover

科创引领未来，松山湖举办“科创中国”技术服务大会

avatar 松山湖开发者村综合服务平台