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


Posted in Javascript onMarch 08, 2019

工作原理

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

具体步骤

所用技术: vuex + axios + localStorage + vue-router

1、在登录路由添加自定义mate字段, 来记录该页面是否需要身份验证

//router.js
{
 path: "/index",
 name: "index",
 component: resolve => require(['./index.vue'], resolve),
 meta: { 
  requiresAuth: true 
 }
}

2、设置路由拦截

router.beforeEach((to, from, next) => {
 //matched的数组中包含$route对象的检查元字段
 //arr.some() 表示判断该数组是否有元素符合相应的条件, 返回布尔值
 if (to.matched.some(record => record.meta.requiresAuth)) {
  //判断当前是否有登录的权限
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 确保一定要调用 next()
 }
})

3、设置拦截器

这里使用axios的拦截器,对所有请求进行拦截判断。

在后面的所有请求中都将携带token进行. 我们利用axios中的拦截器, 通过配置http response inteceptor, 当后端接口返回401 (未授权), 让用户重新执行登录操作。

// 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) // 返回接口返回的错误信息
});

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 的时候,必须要考虑过期机制,不然攻击者就可以永久持有受害用户帐号。

相关文章: XSS 和 CSRF简述及预防措施

//login.vue
 methods: {
  login(){
   if (this.token) {
    //存储在本地的localStograge中
    this.$store.commit(types.LOGIN, this.token)
    //跳转至其他页面
    let redirect = decodeURIComponent(this.$route.query.redirect || '/');
    this.$router.push({
     path: redirect
    })
   }
  }
 }

在vuex中:

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

Vue.use(Vuex);
export default new Vuex.Store({
 state: {
  user: {},
  token: null,
  title: ''
 },
 mutations: {
  //登录成功将, token保存在localStorage中
  [types.LOGIN]: (state, data) => {
   localStorage.token = data;
   state.token = data;
  },
  //退出登录将, token清空
  [types.LOGOUT]: (state) => {
   localStorage.removeItem('token');
   state.token = null
  }
 }
});

在./types.js中:

export const LOGIN = 'login';
export const LOGOUT = 'logout';

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
JS动画效果代码3
Apr 03 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
Javascript之高级数组API的使用实例
Mar 08 #Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 #Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 #Javascript
详解JavaScript 的变量
Mar 08 #Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 #Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 #Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
利用static实现表格的颜色隔行显示
2006/10/09 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
python读取中文txt文本的方法
2018/04/12 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python持续监听文件变化代码实例
2020/07/22 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
绿色环保演讲稿
2014/05/10 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
2014年调度员工作总结
2014/11/19 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
DE1107机评
2022/04/05 无线电