一、安装Cookie
在Vue2.0下，这个貌似已经不需要安装了。因为当你创建一个项目的时候，npm install 已经为我们安装好了。我的安装方式如下：
|
1
2
3
4
5
6
7
|
# 全局安装 vue-cli
$ npm
install
--global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$
cd
my-project
$ npm
install
|
这是我创建好的目录结构，大家可以看一下：
项目结构
二、封装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;
// 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;
|