登录流程

跳转

可以通过导航守卫进行操作，每次跳转前，都判断是否有登录信息，没有的话就跳转登录。

  1. //\src\router\index.js
  2. import { createRouter, createWebHistory } from 'vue-router';
  4. //创建路由
  5. const router = createRouter({
  6.   history: createWebHistory(),  //设置为没有#号的url路径
  7.   routes,   //routes路由页面数组
  8. });
  10. // 导航守卫，每次发生跳转前，都会执行函数内代码
  11. router.beforeEach((to, from, next) => {
  13.   // 临时设置登录状态，正常不会这样写，是通过cookie来记录登录状态
  14.   let isLogin = true;
  16.   // 判断是否登录，登录了就跳转到正常页面，没登录就跳转登录页
  17.   if (to.name !== 'login' && !isLogin) {
  18.     next({ name: 'login' })
  19.   } else {
  20.     console.log(to.name)
  21.     next();
  22.   }
  24. })

验证码

目的

区分人和计算机，防止用计算机程序恶意注册、登录、破解密码等。

方式

image.png

谁验证？

应该是前端验证基本的输入（如验证输入字符、位数等基本验证），提交登录请求时，把用户输入的验证码发送给后端验证正确性。

如果正确性是前端验证码，那么别人可以写程序绕过前端验证码检测，不断给后端发请求进行攻击。

加密

一般加密的方式有base64、md5、SHA1，都是不可逆的。

还有一些对称加密算法，拿一个Key作为密钥，对文本进行加密，想解密，要同样的Key进行解密。

加密解密过程

加密工具

CryptoJS，前端后端通用
https://www.yuque.com/yejielin/mypn47/nsyztg

令牌Token

image.png
由于登录是没有状态的，因此理论上每次发送请求，我们都需要附带账号密码给后端验证，后端核对没问题，才允许请求实际的操作，如增删改查。

但是每次验证太麻烦了，因此就出现令牌token，发送请求只要附带这个令牌，后端核对有这个token，后端就知道是哪个用户发过来的，直接进行对应操作。

随机生成32位的字符串作为token。

这个可以通过vue router 的请求拦截器里面添加，这样每个请求头都会自动附带，不用每次手动加
image.png（添加请求头）

使用

前端一般使用 js-cookie 库来使用cookie
https://www.yuque.com/yejielin/mypn47/hmyecw#Js-cookie