HTML
- 有如下html: 先看代码后挑重点来说明:
<!DOCTYPE html><head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="app"><div><input v-model="username" /><input v-model="password" /></div><div><button v-on:click="login">Login</button><button v-on:click="logout">Logout</button><button v-on:click="getUser">GetUser</button></div><div><button @click="logs=[]">Clear log</button></div><!-- 日志 --><li v-for="(log, idx) in logs" :key="idx">{{ log }}</li></div><script>axios.interceptors.request.use(config => {const token = window.localStorage.getItem("token");if (token) {// 判断是否存在token, 如果存在的话, 则每个http header 都加上token// Bearer是JWT的认证头部信息config.headers.common["Authorization"] = "Bearer " + token;}return config;},err => {return Promise.reject(err);});axios.interceptors.response.use(response => {app.logs.push(JSON.stringify(response.data));return response;},err => {app.logs.push(JSON.stringify(response.data));return Promise.reject(err);});var app = new Vue({el: "#app",data: {username: "test",password: "test",logs: []},methods: {login: async function() {const res = await axios.post("http://localhost:3000/users/login-token", JSON.stringify({username: this.username,password: this.password}));localStorage.setItem("token", res.data.token);},logout: async function() {localStorage.removeItem("token");},getUser: async function() {await axios.get("http://localhost:3000/users/getUser-token");}}});</script>
</body></html>
- 说明:
- 从script标签开始说起:
axios.interceptors.request.use(): 拦截,每次发送http请求时,先执行里面的回调函数 - 回调函数:
config.headers.common["Authorization"] = "Bearer " + token: 中给request请求的首部添加一个"Authorization"字段, "Bearer "是JWT的认证头部信息.
- 后续是3个函数登录、登出、以及(鉴权)获取用户信息,实现逻辑如下:
login: POST请求,使用await 方法获取返回的数据,将返回的数据存入浏览器的localStorage中
logout: 直接删除本地localStorage中的"token"
getUser: 获取鉴权的信息.(前面设置了,会自动发送Token)
Token验证:
原理:
- 客户端使用用户名跟密码请求登录
- 服务器收到请求, 去验证用户名与密码
- 验证成功后, 服务器端会签发一个令牌(Token), 再把这个 Token 发给客户端
- 客户端收到 Token 以后,可以把它存储起来, 比如放在 Cookie里或者 Local Storage 里
- 客户端每次向服务器请求资源的时候需要带着服务端签发的 Token
- 服务端收到请求,然后去检验客户端请求里面带着的 Token, 如果验证成功, 就像客户端返回请求的数据。
Token认证的优点:
- 后台生成的token统一保存在浏览器的localStorage中(减少了服务器端的压力);
- 通过jwt生成token,理论上只要后端的 secret 不泄漏,基本上认为是安全的…
