vue-element-admin登录流程

亦凉 2022-11-28 13:21 164阅读 0赞

一、登录权限：  
1、登录的大致流程  
做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是：不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。  
登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（将这个token存贮到cookie/sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user\_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。  
权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。  
上述所有的数据和操作都是通过vuex全局管理控制的。  
2、登录  
将登录按钮上绑上click事件，点击登录之后向服务端提交账号和密码进行验证。（当然可以在前端用正则先进行简单的验证）  
登录成功后，服务端会返回一个 token（该token的是一个能唯一标示用户身份的一个key），之后我们将token存储在本地cookie/sessionStorage之中，（ps：如果保存在cookie中，注意设置一个失效时间），这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc3NzE4NQ_size_16_color_FFFFFF_t_70_pic_center]  
3、获取用户信息  
用户登录成功之后，我们会在全局钩子router.beforeEach中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了。  
就如前面所说的，只在本地存储了一个用户的token，并没有存储别的用户信息（如用户权限，用户名，用户头像等）。有些人会问为什么不把一些其它的用户信息也存一下？主要出于如下的考虑：  
假设把用户权限和用户名也存在了本地，但这时候用另一台电脑登录修改了自己的用户名，之后再用这台存有之前用户信息的电脑登录，它默认会去读取本地 cookie/sessionStorage 中的名字，并不会去拉去新的用户信息。  
所以现在的策略是：页面会先从 cookie /sessionStorage中查看是否存有 token，没有就走一遍上一部分的流程重新登录，如果有token,就会把这个 token 返给后端去拉取用户信息(user\_info)，保证用户信息是最新的。  
4、权限  
权限控制的主体思路是，前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。但这些控制都只是页面级的，前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。  
后端会验证每一个涉及请求的操作，验证其是否有该操作的权限，所以每个后台请求都会在header请求头中将token携带过去（这个操作可以在axios的拦截器中进行统一封装），后端会根据该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的操作。  
二、跨域  
1、跨域资源共享（CORS）  
每一次请求浏览器必须先以 OPTIONS 请求方式发送一个预请求，从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下，以实际的 HTTP 请求方法发送那个真正的请求。  
CORS实现原理：使用自定义的http头部来让浏览器和服务器进行通信。  
优点：只要第一次配好了，之后不管有多少接口和项目直接复用就可以解决跨域问题，而且不管是开发环境还是测试环境都能方便的使用。对于前端来说和平时发请求写法上没有任何区别，工作量基本都在后端这里。  
2、proxy跨域  
利用webpack-dev-server的proxy来实现，这种方法适用于开发环境，不适用于生产环境，所以在生产环境中需要用Nginx反向代理。

转载于：https://juejin.im/post/6844903478880370701\#heading-5

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc3NzE4NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/4c4e434bc4b84defb7f9a0c24d43de7a.png