整体实现登录思路：
登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。
你对token理解吗？

1、Token的引入：
Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。
2Token的定义：
Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
3、使用Token的目的：
Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
4.Token一般用在三个地方:
①防止表单重复提交
②anti csrf攻击（跨站点请求伪造）
③身份验证（单点登录）这里是引用

第一步：在router的根路径下创建middlepage(中间页)

第二步，路由传参(传token)

在cookie里面存储token和存储用户信息 (auth.js)

在全局下（store），将token存到cookie里面

把token放在请求拦截器中，让每个请求携带自定义token,根据时间情况自行修改，取到用户存放的cookie

在premission.js中，将cookie中的token取出，实现登录

在api里面放接口（以下为获取用户数据以及渲染数据）

将用户信息从cookie中取出，渲染到页面上

普歌--前端 vue-element-admin 实现第三方(无账号密码)登录相关推荐

后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
前端 vue + element + vux
前端 vue + element + vux 页面效果学习资料 https://blog.csdn.net/yangwenpei116/article/details/90206523
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
企业自建应用使用钉钉账号密码登录（钉钉第三方登录）
1.场景描述我们开发了一个钉钉应用,但是客户要求手机端要使用微信.这样的话,我们给客户的解决方案是后台管理功能监控功能使用的钉钉(主要是依托于钉钉的人员,部门,角色的管理,我们应用本身就没有做相关的 ...
VUE ---element ui 引入第三方 iconFont
引入第三方图标(icon)的教程一.简介,以下是阿里妈妈MUX 倾力打造的矢量图标库 1.打开官网: http://www.iconfont.cn/ 2.进入网站登录账号(3选1登录) ,登录成 ...
前端vue+element ie兼容性问题
1.版本兼容性问题 vue 只兼容ie8以上版本: ie8及以下版本不支持Object.defineProperty方法,但这个是vue实现响应式的所必须的,所以从Vue的源码来看根本就无法支持IE8 ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...

普歌--前端 vue-element-admin 实现第三方(无账号密码)登录