基于token的身份验证

关于token

what is token？

token相当于是一个令牌，在用户登录的时候由服务器端生成（基于用户名、时间戳、过期时间、发行者等信息进行签名），然后发放给客户端，客户端将令牌保存，在以后需要登录验证的请求中都需要将令牌发送到服务器端进行验证，如果验证成功，则返回数据。目前很多大型网站都在使用基于token的验证方式：github，Facebook，Twitter…

why token？

从服务器端的角度来讲，传统的登录方式下，服务器端需要为登录的用户生成一个session，会占用服务器的资源；然而在token的验证方式下，服务器端不需要为登录的用户维护一个session来进行通信验证，只需要在登录时生成一个token信息，在请求时验证token的有效性即可。
从跨域开发的角度来讲，由于浏览器的安全机制，在跨域环境下，cookie的传输并不是很方便，同时牵扯到安全问题；然而我们可以通过将token存放在localStorage中，每次发送请求的时候从localStorage中获取发送给服务器端。
大致流程
客户端使用用户名密码登录。
服务端收到请求，去验证用户名与密码。验证成功后，服务端会签发一个 Token，把这个 Token 发送给客户端。
客户端将收到的Token存储起来。（cookie或者localStorage）
客户端每次需要登录验证的请求都需要带着Token发送给服务器端。
服务器端收到请求后先验证Token，如果成功，返回数据。
前端代码
在login之后，服务器返回签发的token信息，我们需要将token进行存储在本地。
登录成功之后的token信息

localStorage.setItem('token', data.data.token);

1
每一次发送请求都要从本地获取token进行发送：

function getToken(){
    if(!!localStorage.getItem('token')){
        return localStorage.getItem('token');
    }

    return null;//如果获取不到token就发送null给服务器端
}

1
2
3
4
5
6
7

token过期处理：

如果服务器返回401，则表示token已过期，需要重新跳转登录。

function handleTokenFailed(code){
if(code==401){
localStorage.clear();
new Toast().showMsg(‘登录信息已过期，请重新登录’,1000)
setTimeout(function () {
location.href = ‘index.html’;
},1000)

    }
}

1
2
3
4
5
6
7
8
9
10
前端检查登录: 在一些不必要发送请求给后端验证登录的情况下，可以通过前端检查登录的方式来拦截一些未登录的情况，这样可以减轻服务器的压力

function checkLogin(){
return !!localStorage.getItem(‘token’);
}
1
2
3
这样，整个对于前端token验证的流程就完成了。