关于登录的那些事
废话:嗯...,最近在写登录方面的功能,就想总结下关于vue项目登录的一些小的知识点和逻辑,有写的不全或不多的,望多包涵和指正。
通常我们在搭建一个项目之后,最先需要处理的就是登录和注册的逻辑了,这里以vue项目为例
在前后端完全分离的情况下,vue实现token验证大致的思路:
当我们第一次登录时候,调用后端接口,发送用户名和密码给后端,当登录过后,操作该系统的其他业务功能时,后端怎么来判断操作的这个人就是刚刚登录的那个人呢?不能每次操作需要掉接口的时候都要登录吧。于是在第一次登录的时候,后端会返回一个token,在后面操作调接口的时候,前端会把这个token传给后端,后端将接收到的token与数据库中的token对比,如果匹配就可以继续操作,不匹配就返回给前端401,前端跳转到登录页面。
那么前端是是如何保存后端的传过来的token,并在每次请求的时候都将token传给后端的
1)后端向浏览器中添加cookies
第一次登录后,后端在response header中添加一个set-cookies属性,格式是key=value,设置token到浏览器的Cookies里存起来,这样浏览器的Cookies就有值了;
登录系统后请求接口中,Request Header中添会自动加Cookie属性,里面的格式也是key=value
2.后端设置token,前端从token取回
登录后后端把token在response.headers.token中返回,前端用localstorage保存或用js-cookie手动保存在cookie中,在下一次请求接口的时候,在拦截器里统一将token值设置为header的authorization属性
import Cookies from 'js-cookie' // 引入js cookie // 创建axios实例 const service = axios.create({ baseURL: process.env.API_ENDPOINT, withCredentials: true, timeout: 1000 * 60 * 60 }) // 请求拦截器 service.interceptors.request.use(config => { // 2. 使用token信息 const TOKEN = Cookies.get('TokenKey'); config.headers['authorization'] = TOKEN; }, error => { return Promise.reject(error) }) // 响应拦截器 service.interceptors.response.use(response => { // 1. 储存token信息 const TOKEN = response.headers.token; Cookies.set('BIM-TOKEN', 'Bearer ' + TOKEN); }, error => { return Promise.reject(error) })
3.token也可能直接在返回的内容中,然后在每个请求的时候以参数的方式带过去
原文地址:https://www.cnblogs.com/lita07/p/15009862.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- java编程思想第四版第三章要点习题
- GoAccess分析Web日志
- java编程思想第四版第三章要点总结
- 05 . Prometheus监控Nginx
- java编程思想第四版第五章总结
- 01 . 容器编排简介及Kubernetes核心概念
- java编程思想第四版第五章习题
- 02 . Kubeadm部署Kubernetes及简单应用
- java编程思想第四版第六章习题
- Docker部署Python项目
- 03 . 二进制部署kubernetes1.18.4
- 01 . 美团全链路监控CAT简介及部署
- 02 . Ansible高级用法(运维开发篇)
- java编程思想第四版第七章总结
- OpenVPN原理及部署使用