（2）vue-element-admin登录流程梳理

最新推荐文章于 2024-06-13 15:33:22 发布
最新推荐文章于 2024-06-13 15:33:22 发布
阅读量9.6k 收藏 63
点赞数 15
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanguofei/article/details/106396581
版权

一、准备工作

项目模板采用vue-element-admin，使用vue和element-ui实现

1.目录结构

在这里插入图片描述

permission.js

登录流程中，permission.js是最重要的环节，这个文件是路由的全局钩子（beforeEach和afterEach），全局钩子的意思就是每次跳转的时候可以根据情况进行拦截，不让他跳转。使用场景就是有些页面需要登录才能访问，这时候就可以在beforeEach中校验用户登录状态来进行拦截。

utils/auth.js

设置token到cookie中的操作封装。

router

有关路由的一些设置

二、登录流程解析

登录页面：view/login/index.vue

最低0.47元/天 解锁文章
单车欲问边
关注
  • 15
    点赞
  • 踩
  • 63
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue-element-admin集成方案------登录篇(涉及部分Vuex知识)
wanwine的博客
04-02 1万+
权限验证对于后台管理系统必不可少,不同的权限对应不同的路由,同时侧边栏也需要根据权限不同,异步生成.下面是登录和权限验证的思路. 登录: 前端将账号密码post到服务端进行验证,如果验证通过,服务端返回一个token,拿到token后(将token存入cookie中,保证刷新页面后记住用户的登录状态),根据token再去拉去一个user_info的接口来获取用户详情信息(如用户权限,用...
vue-element-admin的讲解
qq_51269815的博客
01-16 6284
一：文件结构讲解 1.文件价格 package.json文件防止模板所需要的各种依赖，npm install 就是安装这些 index.js文件放置的是路由 main.js文件放置初始化，加载所需要的插件 public下index.html 时一个模板文件，作用是生成项目的入口文件 二：登录模块 登录逻辑：当用户填写完账号密码后向服务端验证是否正确，验证通过后，服务端会返回一个token，拿到token后（可将token存到cookie中，保证页面刷新后可以记住用户登录状态），前端会根据token拉取一个
vue-element-admin后台集成方案
最新发布
m0_46266496的博客
06-13 1100
官网：介绍 | vue-element-admin。
理解vue-element-admin 的登录流程
qq_45791799的博客
02-17 4830
1.首先,点击登录按钮，触发handleLogin方法，通过 this.$store.dispatch(“user/login”, this.loginForm)调用vuex中login方法，此处user/login表示的是调用user文件下的login方法 handleLogin() { this.$refs.loginForm.validate((valid) => { if (valid) { this.loading = true;
vue-element-admin 个人理解登录流程
唐都恩了的博客
05-08 2960
登录流程 1.页面发起登录请求 页面发起登录请求，会调用vuex中的 login() 方法(@/store/modules/user.js) 全局拦截路由请求 [有白名单] 和响应 判断状态码code是否正确 若果正确，继续判断vuex中store是否存在用户信息 如果有，next() 如果没有，就会调用vuex中(@/store/modules/user.js)中的getInfo()方法来获取用户信息 vuex中的getInfo()方法中又调用了(@/api/user.js)中的getInfo()方法并传
vue-element-admin 登陆
2301_76280530的博客
06-10 2465
使用vue-element-admin封装好的登陆接口，与自己后端的接口相匹配，完成登陆页面的跳转。对于正常登陆来说，vue-element-admin对每一个页面请求都设置有拦截器，封装有token的方法，每次在发送请求时，都会找寻浏览器中的Cookice是否存有token值，如果有则每次发送请求时，携带token，与后端交互。如果没有，vue-element-admin会直接跳到首页，重新登陆。
使用vue-element-admin的登陆流程
qq_57414680的博客
06-30 648
5.在vuex中储存服务器返回来的token数据，并引入utils/auth里token的方法，在本地初始化的时候调用取出token的方法，取出token设置为初始值。7.在vuex中的mutations里面添加方法，把actions提交过来的token赋值给储存token的变量，并在本地储存一份。4.设置请求拦截器，把vuex中储存的token注入到每一次的http请求里，因为除了登陆，其他请求都需要携带token。6.在vuex中的actions里面添加异步调用接口的方法。至此登陆流程就完成了！
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue-element-admin 集成框架设置中文语言
11-10
Vue-element-admin是基于Vue.js构建的一个后台管理界面框架，它结合了Element UI组件库，提供了丰富的UI组件和强大的功能，使得开发者能够快速搭建企业级的后台管理系统。 在"vue-element-admin 集成框架设置中文...
vue-element-admin 精简版
03-03
"Vue-element-admin ...总的来说，"vue-element-admin 精简版"是一个轻量级的前端框架，整合了Vue.js、Element UI以及一系列的配置和工具，以优化开发流程，同时减少了不必要的组件，更适合快速构建简洁的管理界面。
vue-element-admin-4.4.0.zip
03-01
"vue-element-admin-4.4.0.zip" 是一个包含Vue.js前端框架的项目压缩包，主要用于构建管理后台系统。这个版本是4.4.0，意味着它可能包含了该框架的一些更新和改进。Vue.js是一个轻量级、高性能的前端JavaScript框架...
vue-element-admin完整依赖包node_modules
03-05
从github克隆下来的vue-element-admin项目后，有时install时会报各种异常导致下载失败，故上传此完整依赖包以便各位使用
vue-element-admin登录流程
JQ_zhong
08-17 1540
一、登录权限： 1、登录的大致流程 做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是：不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（将这个token存贮到cookie/sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info
vue-element-admin用户登录流程
zydbk123456的博客
08-31 4787
1.vue-element-ui简介 vue-element-ui集成了vue和element-ui框架。 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件。 2.使用token作为用户凭证 vue-element-ui使用了token作为用户的登录凭证。 ...
vue-element-admin 登录逻辑的梳理
qq_59598977的博客
07-04 284
vue-element-admin这个库感觉有很多需要学习的地方，我学习这个库的方法是，先看文件夹了解各存放的是什么，再看组件以及组件里面所涉及的东西，然后看路由，顺着路由，摸清他的逻辑，顺藤摸瓜，倒推回去理解。上面的api中的Login方法，它调用了request.js,request.js是封装了axios,是用来请求后台接口的，如果请求成功，就调用.then()方法。:先看看用户要进入的页面是否在白名单内，白名单的页面在无token的情况下，直接放行，如果不在白名单内，就回到登录页。
element 登录_vueelementadmin的登录功能分析
weixin_39782433的博客
11-25 292
内容提要：vue-element-admin的登录功能分析。最近学习不在状态，争取明天开始调整好。登录组件分析在vue-element-admin的基础上进行二次开发。登录功能的组件页面在项目的src/views/login 中。以下几点比较重要：el-tooltip：当用户打开大小写时，会进行提示。相关属性：manual：手动控制模式，设置为 true 后，mouseenter 和 m...
VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明
热门推荐
cimo的博客
10-22 5万+
最近因为next()遇到了不少问题，在这里记录一下 首先是路由守卫，是不是感觉简简单单 beforeEach((to, from, next) => { to //是要去的路由 from // 是当前路由 next() // 是放行的意思 } 但是在看别的项目时常常能看到next('/logon') 、 next(to) 或者 next({ ...to, replace: true }) 这又是啥意思呢 其实在路由守卫中，只有next()是放行，其他的诸如：next('/logon') 、 n
使用vue-admin后台的时候，premission.js文件不生效以及el-menu点击路由不跳转问题
weixin_52379846的博客
03-24 390
这里当时在配置后台框架的时候，不小心注释了，解开就行。
vue-element-admin的登录逻辑和信息获取
Suzerk的博客
08-15 5178
在/views/login目录中index.vue是登录界面，SocialSignin.vue是第三方登录页面。根据文档，思路如下： https://juejin.cn/post/6844903478880370701 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息
vue-element-admin注册登录
09-06
- *1* *2* *3* [Vue和Vue-Element-Admin（四）：vue-element-admin的用户登录集成](https://blog.csdn.net/yezonggang/article/details/109850163)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值