简述登录及前台登录拦截原理及实现

2017-11-23 本文已影响2031人歇歇

title: 简诉登录及前台登录拦截原理及实现
tags: [Vue, axios, http, session, cookie, token]
date: 2017-11-22

本文会讲诉客户端渲染时，两种常见的登录权限控制方法：session登录、token登录

事实上session登录和token登录的差别是很小的，主要取决于后台对登录标识的存储状态

本文将基于Vue-router和axios，简述记录登录状态的方式以及如何实现前台的路由拦截，希望能给手生的朋友一点帮助。

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这位同学，这种方式更合理。