title: 简诉登录及前台登录拦截原理及实现
tags: [Vue, axios, http, session, cookie, token]
date: 2017-11-22
本文会讲诉客户端渲染时，两种常见的登录权限控制方法：session登录、token登录
事实上session登录和token登录的差别是很小的，主要取决于后台对登录标识的存储状态
本文将基于Vue-router和axios，简述记录登录状态的方式以及如何实现前台的路由拦截，希望能给手生的朋友一点帮助。
登录
在B/S系统是基于HTTP协议的，故谈登录机制，我们先来了解一下HTTP协议。
HTTP协议属于TCP/IP协议簇，同FTP、DNS协议一样位于TCP/IP四层结构中的顶层——应用层。HTTP是一种不保存状态的协议，即HTTP协议对于发送过的请求和响应都不会做持久化处理，每一次请求与响应都是独立的。这显然不能满足用户登录这样的需求，于是HTTP/1.1引入了Cookie技术用以管理状态信息。
TCP/IP四层结构：应用层、传输层、网络层、数据链路层
基于Cookie的登录
Cookie虽然未被编入标准化HTTP/1.1的RFC2016中，但其在web站点得到了极为广泛的应用。Cookie的工作机制是用户识别及状态管理，且http请求时会自动带上cookie。故实际上，利用cookie来实现登录状态管理，前台是不需要做什么的。
具体流程如下：
- 客户端发起登录请求。
- 服务端接收到登录请求，并做校验。如果登录成功，服务端会记录该用户的登录状态，并在响应头中加上Set-Cookie头部信息，其中可以放入与该用户登录状态相关的标识。比如：`Set-Cookie:sessionid=abcdef123456; HttpOnly;
- 客户端（浏览器）接收到响应包后，会将Set-Cookie中的值记录到cookie中，并在将后的请求中都带上cookie。
- 服务端接收到用户的请求，会取sessionid的值去匹配用户登录状态。如果登录状态是成功则请求继续，否则返回重新登录（当然在实际情况中，并不一定是返回重新登录，或许还有有一些sessionid过期时长的判断）。
Set-Cookie中可设置的字段值：
name=value; // cookie的名称和值 expires=Date; // cookie有效期 path=path; // 用于限制（指定）cookie的发送范围的文件目录，默认是文档所在目录 domain=域名; // 限制怎样的域名结尾，才可以发送cookie（比如：domain=.baidu.com，则以.baid.com结尾的域名才可发送该cookie） Secure; // 限制https才能发送该cookie HttpOnly; // 限制js无法获取该cookie，能一定程度上预防XSS(cross-site scripting)
可以说这种方法对前台相当友好，登录状态全部由后台处理。后台一般使用session来记录登录信息，一般框架都自带这部分功能。如果没有，也只需把用户状态信息存放在一个表中（会频繁访问），获得sessionid再去查表。
不基于Cookie登录
是的，不使用Cookie也是能实现登录验证的，实现原理和过程都同Cookie，只有以下两点细微差别：
- 服务端传递sessionid的方式不同：cookie是由后台用Set-Cookie设置，从响应头传递到客户端。而在不使用Cookie时，sessionid通过响应数据传到客户端，客户端把数据记录在localstorage中。
sessionid只是代指“和后台状态及其他用户信息关联标识”，名字不用在意啦~
- 客户端传递sessionid的方式不同：cookie模式下，客户端的请求会自动把cookie放到请求头中，不需要前端手动去操作。而在不使用Cookie时，sessionid只能通过参数传递喲~
前台登录拦截
本文使用Vue-Router + axois实现前台的登录拦截功能。
首先是登录拦截需要实现的功能分析：
- 如果登录验证不通过，则直接跳转登录页面。
- 这里要验证是否登录，所以必须有一个全局的登录标识
- 每次通过路由跳转，都需要校验登录状态是否存在。
- 所以登录标识的校验需要放在一个路由拦截函数（每一次跳转都需要执行到的函数）中，路由模块都会实现这个函数的。
- 如果跳转登录页面过程中，也去验证了登录标识，那么会形成死循环，所以登录页面是不需要验证登录标识的。
- 两种方法：一是为所有路由都配置一个参数，标记该路由是否需要登录验证；二是在路由拦截函数中去判断，如果下一个路由是登录，则不验证。
- 如果前台的登录标识是登录状态，但是请求到后台返回未登录，则需要改变前台登录标识状态，且跳转登录页面。
- 调用响应拦截函数（对所有响应进行一个过滤），如果有返回登录标识，则改变登录状态并跳转。
emmm...
全局登录标识
全局登录标识其实是和后台登陆状态返回息息相关的，三种情况会改变其状态：
- 登录成功
- 退出登录
- 响应数据中有重新登录标识
另外根据需求去考虑标识的存放位置：
- 如果需要每次刷新都重新登录，则放到全局变量中就OK。比如vuex、事件bus.js、全局状态管理.js...
ifLogin: false - 如果需要保持持久化，则可定义在localstorage中。
localStorage.setItem(ifLogin, false)
路由拦截函数 & 路由中设置是否需要校验登录状态
// 路由
let router = new VueRouter({
...
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/structure',
name: 'structure',
meta: {
require: true, // 该路由需要登录
},
component: Structure
}
...
})
// 路由拦截函数 -- vue-router中叫导航守卫（全局守卫）
router.beforeEach((to, from, next) => {
if (to.meta.require) {
if (!localStorage.getItem('ifLogin')) {
next({
path: '/login',
query: {redirect: to.fullPath} // 将跳转首页时的路由path作为参数，登录成功后跳转到该路由
})
}
}
next()
})
响应拦截函数
第一种方法：重新登录标识在响应数据中返回：
// http response 拦截器
axios.interceptors.response.use(
response => {
// 对象
if (typeof response.data === 'object' && Object.prototype.toString.call(response.data) === '[object Object]') {
// 后台返回的重新登录标识
if (response.data.ret === -100) {
localStorage.setItem('ifLogin', false)
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
return response;
},
error => {
console.log(error)
});
第二种方法：重新登录标识通过响应状态返回：
// http request 拦截器
axios.interceptors.request.use(
config => {
if (store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.Authorization = `token ${store.state.token}`;
}
return config;
},
err => {
return Promise.reject(err);
});
// http response 拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳转到登录页面
store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
return Promise.reject(error.response.data) // 返回接口返回的错误信息
});
第二种方法拷贝from这位同学，这种方式更合理。
网友评论