vue-element-admin实现login和logout

最新推荐文章于 2023-08-11 10:56:28 发布
原创 最新推荐文章于 2023-08-11 10:56:28 发布 · 5.1k 阅读 · 32 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍基于花裤衩的vue-element-admin模板改造前端后台管理系统的方案，数据库用黑马教程电商管理系统的.sql文件。详细步骤包括克隆项目、去掉eslint、安装依赖、启动项目，还涉及后端登录接口编写、修改baseurl、实现登录与退出登录等操作。

【注】本篇文章介绍的是基于花裤衩（链接地址）的vue-element-admin模板改造的一个前端的后台管理系统解决方案，数据库运用的是（mysql）黑马教程的电商管理系统的.sql文件，操作步骤来自于网络资料和自己不断尝试的合集，感谢参考和建议！

文章目录

克隆项目

去链接里面clone花裤衩的模板
基础模板: vue-admin-template
集成方案: vue-element-admin

去掉eslint

为避免以后运行项目报错，将package.json中的eslint文件都删掉（有4个），以最新版搜索结果为准
在这里插入图片描述
同时将下面这两个文件也删掉
在这里插入图片描述

安装依赖

终端命令行切换到当前目录，安装依赖：npm install、npm i、cnpm install、cnpm i。任选一个命令，cnpm更快一些

启动项目

运行npm run dev、cnpm run dev进入到登录界面
在这里插入图片描述

后端编写登录接口

由于我前面讲到这里借用的黑马的，我自己也不懂后端，就跳过了

修改baseurl

编辑.env.development文件

在这里插入图片描述
在这里插入图片描述

修改vue.config.js

在这里插入图片描述
进行的proxy的设置可以解决跨域问题
在这里插入图片描述

npm run dev重新运行，点击登录查看是否配置生效

成功的样式如下图实例：
在这里插入图片描述

实现登录

下面就开始疯狂的回推检索操作~

找到登录请求

找到目录/src/views/login/index，打开它，可以看到发送登录请求的操作
出现this.$store，看到这个东西就去store目录下面找东西
在这里插入图片描述

找到store中的user.js

找到目录/src/store/modules/user.js，打开它
在这里插入图片描述
找到login所对应的函数：
在这里插入图片描述
在这里插入图片描述

找到user的api

因为所有接口都来自于api，所以直接去/src/api中找user
在这里插入图片描述
发现api直接return 一个request，这又是啥操作，继续找request（【注】因为我们已经修改了baseurl，这里的请求url需要做相应的修改）
在这里插入图片描述

找到request模块

找到目录/src/utils/request.js
在这里插入图片描述
打开一开，原来request是封装好的axios，主要用来发送网络请求（【注】这里的验证状态，要根据自己api的返回结果来 做修改，例如我成功的返回状态是：res.meta.status === 200;提示信息是:res.meta.msg）
在这里插入图片描述

修改配置后，npm run dev重新启动

发现报错，没有定义一个东西
在这里插入图片描述
借鉴大佬的方法，直接将request注册到全局
在/src/main.js中注册request方法：
在这里插入图片描述
如果接口请求需要token，忽略对token的修改，这里是把token写死，访问接口会报错
注册全局后，发现接口可以访问，返回参数也正确，但点击登录不能跳转？？？
一步步回推，发现/src/store/modules/user.js中需要一个data
在这里插入图片描述
发现没有data，去mock中取一个死数据放过来
找到/mock/user.js
在这里插入图片描述
继续找token[username]
在这里插入图片描述
继续找“admin-token”
在这里插入图片描述
直接将这个数据拿过来，将/src/stroe/modules/user.js中的内容进行修改
在这里插入图片描述
token到这里结束
修改后，发现仍然报错404，又发现一个info接口，继续查查这个接口那里来的
全局搜索一下，发现在/src/api/usr.js中有一个getInfo接口
在这里插入图片描述
在/src/store/modules/user.js中也发现了getInfo的内容
在这里插入图片描述
大佬金句：
在这里插入图片描述
于是，展示修改：
在这里插入图片描述
然后，重新启动！！！终于终于…登录成功
在这里插入图片描述

实现退出登录

找到退出登录的操作按钮

/src/layout/components/Navbar.vue文件
在这里插入图片描述
【注】注销登录可以调用user/resetToken直接清除前端的cookie记录，不去与后端交互

定义resetToken这个方法

找到目录/src/store/modules/user.js
在这里插入图片描述
然后就发现退出登录这个功能就实现了！！！

Vue和Vue-Element-Admin（十三）：登录页
叶子叶来
07-29 998
登录页
SpringBoot实践（十七）：与vue-element-admin登录集成
叶子叶来
09-16 5695
前面博客有vue-element-admin的登录集成：登录集成，本次写个简易版，只需要前端需要的user/login、user/logout、user/info这3个接口，login实现token生成，logout直接退出登录没有操作逻辑，info是拿到login返回token后存在vuex后携带token拿当前user的权限的，把返回的roles列表读取出来，权限是对应不同的路由路径的，后端demo在git上，写的很随意需要可以参考：后端 vue-element-admin环境 链接教程很详..
vue-element-admin 登陆
2301_76280530的博客
06-10 3573
使用vue-element-admin封装好的登陆接口，与自己后端的接口相匹配，完成登陆页面的跳转。对于正常登陆来说，vue-element-admin对每一个页面请求都设置有拦截器，封装有token的方法，每次在发送请求时，都会找寻浏览器中的Cookice是否存有token值，如果有则每次发送请求时，携带token，与后端交互。如果没有，vue-element-admin会直接跳到首页，重新登陆。
vue-element-admin框架 登录（一）
qq_32812063的博客
12-27 2705
官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 备注： 中文版本i18n分支(https://github.com/PanJiaChen/vue-element-admin/tree/i18n) 权限控制版本：https://github.com/PanJiaChen/vue-admin-template/tree/permission-control 登陆流程图： 1.(src/views/login/index.vu
Vue-element-admin上手之登录篇
qq_32865337的博客
05-18 1108
前端新手学了下vue，用vue-element-admin熟悉了一下vue的用法，发现很多地方都十分的绕，特此写这篇文章记录一下登录功能的工作流程。 1.@views/login 在vue项目中，基本代码都在src目录下，这不用多说。而页面代码都写在src/views下，每一个子视图相当于是个页面，通用的组件则是在src/components下，并不是我最开始以为所有的页面都分成组件然后都写在components下，实际上这种也合理一点，只有通用的才在src/components下。 login.
10. vue-element-admin模拟登录
qq_59284482的博客
03-24 1380
1、修改系统登录默认使用地址 2、查看登录调用的两个方法
vue-element-admin 生成顶部导航栏解决方案
热门推荐
顾老师叫我写博客的博客
12-10 2万+
背景 项目需要基于 vue-element-admin 开发，vue-element-admin主要定位是中后台管理系统，而项目又偏向前中台，因此想使用顶部导航栏的方式。原本以为很简单，不就是将 导航栏组件 mode设为 horizontal 就可以了吗，naive~ 排查了一下代码（和官文），发现 ： 这里同时也改造了 element-ui 默认侧边栏不少的样式，所有的 css 都可以在 @/...
dotnetcore集成vue-element-admin 登录
soulman1234的专栏
02-02 1133
dotnetcore集成vue-element-admin 登录 我这里使用的是vue-element-admin的基础模板vue-admin-template，基本上vue-element-admin也是同理。 从vue-element-admin基础模板，vue-admin-template clone下来 GitHub地址 执行Npm 安装,如果没有npm的话，就去下载个node.js安装下，在vue-admin-template下面， 打开cmd，指定到自己vue-admin-template目录下
Vue 人资 实战篇一 vue-element-admin学习，项目初始化，sass运用
m0_55170432的博客
05-31 1096
人力资源的环境搭建 1.0 vue-element-admin的了解和介绍 vue-element-admin (https://panjiachen.gitee.io/vue-element-admin-site/zh/) 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。 是一个后台集成方案, 集成了PC项目中很多的业
vue-element-admin 项目运行流程梳理
莞工杰仔的博客
03-18 2339
vue-element-admin项目运行流程
修改vue-admin-template登录退出功能
m0_60459392的博客
10-27 1723
1，打开 .env.development .env.production .env.staging 修改 VUE_APP_BASE_API = '/api' 2，打开utils 目录里的request.js文件 22行 config.headers['Authorization'] = getToken() 49行，if (res.code !== 200) 3，修改登录方法请求，打开文件 src/api/user.js，请根据自己业务修改 export function lo.
vue-element-admin用户登录流程
zydbk123456的博客
08-31 4997
1.vue-element-ui简介 vue-element-ui集成了vue和element-ui框架。 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件。 2.使用token作为用户凭证 vue-element-ui使用了token作为用户的登录凭证。 ...
使用vue-element-admin的登陆流程
qq_57414680的博客
06-30 1084
5.在vuex中储存服务器返回来的token数据，并引入utils/auth里token的方法，在本地初始化的时候调用取出token的方法，取出token设置为初始值。7.在vuex中的mutations里面添加方法，把actions提交过来的token赋值给储存token的变量，并在本地储存一份。4.设置请求拦截器，把vuex中储存的token注入到每一次的http请求里，因为除了登陆，其他请求都需要携带token。6.在vuex中的actions里面添加异步调用接口的方法。至此登陆流程就完成了！
vue-admin-element登录页面改造
一个一直在努力的前端小白，在为了成为全栈程序员的道路上加油！
08-11 1555
Element 的官方地址为 http://element-cn.eleme.io/#/zh-CN，该网站为我们提供了丰富的组件样例，点击网站中的“显示代码”，复制需要部分。使用npm进行安装npm i element-ui -S。
（2）vue-element-admin登录流程梳理
hanguofei的博客
05-28 9878
一、准备工作 项目模板采用vue-element-admin，使用vue和element-ui实现 1.目录结构 permission.js 登录流程中，permission.js是最重要的环节，这个文件是路由的全局钩子（beforeEach和afterEach），全局钩子的意思就是每次跳转的时候可以根据情况进行拦截，不让他跳转。使用场景就是有些页面需要登录才能访问，这时候就可以在beforeEach中校验用户登录状态来进行拦截。 utils/auth.js 设置token到cookie中的操作封装。 r
理解vue-element-admin 的登录流程
qq_45791799的博客
02-17 5307
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中功能模块的实现（二：退出登录模块）
qq_42566940的博客
04-22 531
退出登录 1：这个功能比较简单，接收下拉列表中的 command参数，如果参数的值为logout，就调用退出登录接口， 2：判断验证如果code为1就移除存在session中的username 3：this.$router.replace跳转到首页面 async handleCommand(command){ if(command==="logout"){ let res = await this.$http.get("/api/user/logout");
（3）vue-element-admin:权限管理（登录登出，动态路由过程讲解）
qq_42499670的博客
08-10 3177
想了解登录登出，动态路由怎么做的可以看前面两篇文章。 本篇章参考：https://ke.qq.com/course/3323814?taid=10963075825055654 想要源码的可以联系视频里的老师或者加我qq814216044。 权限管理个人理解有两种，一种是显示按钮但是点击的时候没有，第二种是直接不显示按钮，本文讲解是第二种，主要使用v-if属性，如下： 按钮使用v-if，如果值为ture就显示按钮，不...
element 登录_vueelementadmin的登录功能分析
weixin_39782433的博客
11-25 361
内容提要：vue-element-admin的登录功能分析。最近学习不在状态，争取明天开始调整好。登录组件分析在vue-element-admin的基础上进行二次开发。登录功能的组件页面在项目的src/views/login 中。以下几点比较重要：el-tooltip：当用户打开大小写时，会进行提示。相关属性：manual：手动控制模式，设置为 true 后，mouseenter 和 m...
vue-element-plus-admin 登录
最新发布
03-15
### 关于 `vue-element-plus-admin` 登录功能的实现与常见问题 #### 登录功能的核心逻辑 在基于 Vue3 和 TypeScript 的前端框架中，登录功能通常涉及以下几个方面：用户认证、Token 存储管理以及权限控制。以下是针对 `vue-element-plus-admin` 中登录功能的具体说明： 1. **用户认证流程** 用户通过表单提交用户名和密码到后端接口进行验证。如果验证成功，则返回一个 Token（通常是 JWT）。此过程可以通过 Axios 请求来完成[^1]。 ```typescript import axios from 'axios'; const login = async (username: string, password: string): Promise<any> => { try { const response = await axios.post('/api/auth/login', { username, password }); return response.data; } catch (error) { console.error('Login failed:', error); throw error; } }; ``` 2. **Token 存储与读取** 成功获取 Token 后，将其存储在本地存储（如 localStorage 或 sessionStorage）以便后续请求携带该 Token 进行身份验证。 ```javascript // 存储 Token 到 localStorage localStorage.setItem('token', token); // 获取 Token function getToken(): string | null { return localStorage.getItem('token'); } // 清除 Token function clearToken() { localStorage.removeItem('token'); } ``` 3. **权限路由配置** 动态加载用户的权限路由是现代管理系统中的重要部分。当用户登录时，需从后端拉取其对应的权限数据并动态注入到路由表中[^3]。 ```typescript import router from '@/router'; import store from '@/store'; export function resetRouter() { router.matcher = createRouter().matcher; // Reset the matcher to avoid duplicate routes } export function addDynamicRoutes(routes: any[]) { routes.forEach(route => { router.addRoute(route); // Add dynamic route }); } ``` 4. **登出操作** 当用户点击退出按钮时，清除当前会话状态，并重定向至登录页。 ```typescript const logout = () => { clearToken(); // Clear stored token resetRouter(); // Reset all added dynamic routes window.location.href = '/login'; // Redirect to login page }; ``` --- #### 常见问题及其解决方案 1. **登录后未跳转首页** 如果用户登录后未能自动跳转至主页，可能是因为缺少全局守卫设置或路径匹配错误。确保在路由文件中设置了正确的导航逻辑。 ```typescript router.beforeEach((to, from, next) => { if (!getToken()) { if (to.path !== '/login') { next({ path: '/login' }); // If not logged in, redirect to login page } else { next(); } } else { next(); } }); ``` 2. **Token 失效处理** 需要监听 HTTP 请求失败的情况，在拦截器中捕获 401 错误码，并提示用户重新登录。 ```typescript axios.interceptors.response.use( (response) => response, (error) => { if (error.response.status === 401) { ElMessage({ message: 'Session expired, please log in again.', type: 'warning', }); setTimeout(() => { logout(); // Call logout method when session expires }, 1500); } return Promise.reject(error); } ); ``` 3. **多级嵌套菜单支持不足** 对于复杂的业务场景，例如字典项下的子信息展示，原生模板可能无法完全覆盖需求。此时可以自定义组件或者扩展已有模块的功能[^2]。 --- ### 总结 上述内容涵盖了 `vue-element-plus-admin` 在登录功能方面的基本实现方式及一些常见的开发注意事项。开发者可以根据实际项目的需求调整代码细节，同时建议深入研究官方文档及相关社区资源以获得更全面的技术指导。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值