详解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系列(12) 变量对象(Variable Object)
Jan 16 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
详细分析vue响应式原理
Jun 22 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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
php中strtotime函数用法详解
2014/11/15 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python 随机森林算法及其优化详解
2019/07/11 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
土建工程师岗位职责
2014/06/10 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
初中家长评语和期望
2014/12/26 职场文书
大学生十八大感想
2015/08/11 职场文书