关灯
开启左侧

vue项目中使用token的身份验证的简单实践

[复制链接]
老蚊子 发表于 2019-3-6 08:30:57 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
本帖最后由 老蚊子 于 2019-3-6 08:37 编辑

工作原理-------------如果你不懂Vue,就请略过~~~
  • 前端页面进行登录操作, 将用户名与密码发给服务器;
  • 服务器进行效验, 通过后生成token, 包含信息有密钥, uid, 过期时间, 一些随机算法等 ,然后返回给前端
  • 前端将token保存在本地中, 建议使用localstorage进行保存.  下次对服务器发送请求时, 带上本地存储的token
  • 服务器端,进行对token的验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端
  • 为通过则返回错误码, 提示保错信息, 然后跳转到登录页.

具体步骤
所用技术: vuex + axios + localStorage + vue-router
1、在登录路由添加自定义mate字段, 来记录该页面是否需要身份验证
  1. //router.js
  2. {
  3.     path: "/index",
  4.     name: "index",
  5.     component: resolve => require(['./index.vue'], resolve),
  6.     meta: {
  7.         requiresAuth: true
  8.     }
  9. }
复制代码

2、设置路由拦截
  1. router.beforeEach((to, from, next) => {
  2.     //matched的数组中包含$route对象的检查元字段
  3.     //arr.some() 表示判断该数组是否有元素符合相应的条件, 返回布尔值
  4.     if (to.matched.some(record => record.meta.requiresAuth)) {
  5.         //判断当前是否有登录的权限
  6.         if (!auth.loggedIn()) {
  7.             next({
  8.                 path: '/login',
  9.                 query: { redirect: to.fullPath }
  10.             })
  11.         } else {
  12.             next()
  13.         }
  14.     } else {
  15.         next() // 确保一定要调用 next()
  16.     }
  17. })
复制代码
3、设置拦/截/器
这里使用axios的拦/截/器,对所有请求进行拦/截判断。
在后面的所有请求中都将携带token进行. 我们利用axios中的拦/截/器, 通过配置http response inteceptor, 当后端接口返回401 (未授权), 让用户重新执行登录操作。

  1. // http request <span style="color: rgb(153, 153, 136); font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 11px; white-space: pre; background-color: rgb(248, 248, 248);">拦/截/器</span>
  2. axios.interceptors.request.use(
  3.     config => {
  4.         if (store.state.token) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
  5.             config.headers.Authorization = `token ${store.state.token}`;
  6.         }
  7.         return config;
  8.     },
  9.     err => {
  10.         return Promise.reject(err);
  11.     });

  12. // http response <span style="color: rgb(153, 153, 136); font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 11px; white-space: pre; background-color: rgb(248, 248, 248);">拦/截/器</span>
  13. axios.interceptors.response.use(
  14.     response => {
  15.         return response;
  16.     },
  17.     error => {
  18.         if (error.response) {
  19.             switch (error.response.status) {
  20.                 case 401:
  21.                     // 返回 401 清除token信息并跳转到登录页面
  22.                     store.commit(types.LOGOUT);
  23.                     router.replace({
  24.                         path: 'login',
  25.                         query: {redirect: router.currentRoute.fullPath}
  26.                     })
  27.             }
  28.         }
  29.         return Promise.reject(error.response.data)   // 返回接口返回的错误信息
  30. });
复制代码

4、将token存储在本地中
可以使用cookies/local/sessionStograge


三者的区别:
  • sessionStorage 不能跨页面共享的,关闭窗口即被清除,
  • localStorage 可以同域共享,并且是持久化存储的
  • 在 local / session storage 的 tokens,就不能从不同的域名中读取,甚至是子域名也不行.
    解决办法使用Cookie.demo: 假设当用户通过 app.yourdomain.com 上面的验证时你生成一个 token 并且作为一个 cookie 保存到 .yourdomain.com,然后,在 youromdain.com 中你可以检查这个 cookie 是不是已经存在了,并且如果存在的话就转到 app.youromdain.com去。这个 token 将会对程序的子域名以及之后通常的流程都有效(直到这个 token 超过有效期)只是利用cookie的特性进行存储而非验证.

关于XSS和XSRF的防范:
  • XSS 攻击的原理是,攻击者插入一段可执行的 JavaScripts 脚本,该脚本会读出用户浏览器的 cookies 并将它传输给攻击者,攻击者得到用户的 Cookies 后,即可冒充用户。
  • 防范 XSS ,在写入 cookies 时,将 HttpOnly 设置为 true,客户端 JavaScripts 就无法读取该 cookies 的值,就可以有效防范 XSS 攻击。
  • CSRF是一种劫持受信任用户向服务器发送非预期请求的攻击方式。
  • 防范 CSRF: 因为 Tokens 也是储存在本地的 session storage 或者是客户端的 cookies 中,也是会受到 XSS 攻击。所以在使用 tokens 的时候,必须要考虑过期机制,不然攻击者就可以永久持有受害用户帐号。

  1.     //login.vue
  2.     methods: {
  3.         login(){
  4.             if (this.token) {
  5.                 //存储在本地的localStograge中
  6.                 this.$store.commit(types.LOGIN, this.token)
  7.                 //跳转至其他页面
  8.                 let redirect = decodeURIComponent(this.$route.query.redirect || '/');
  9.                 this.$router.push({
  10.                     path: redirect
  11.                 })
  12.             }
  13.         }
  14.     }
复制代码

在vuex中:

  1. import Vuex from 'vuex';
  2. import Vue from 'vue';
  3. import * as types from './types'

  4. Vue.use(Vuex);
  5. export default new Vuex.Store({
  6.     state: {
  7.         user: {},
  8.         token: null,
  9.         title: ''
  10.     },
  11.     mutations: {
  12.         //登录成功将, token保存在localStorage中
  13.         [types.LOGIN]: (state, data) => {
  14.             localStorage.token = data;
  15.             state.token = data;
  16.         },
  17.         //退出登录将, token清空
  18.         [types.LOGOUT]: (state) => {
  19.             localStorage.removeItem('token');
  20.             state.token = null
  21.         }
  22.     }
  23. });
复制代码

在./types.js中:
  1. export const LOGIN = 'login';
  2. export const LOGOUT = 'logout';
复制代码




 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

11粉丝

61帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )