后台管理模块增加登录验证，与门户网站一样都是采用无状态登录。

一、新增全局函数

在main.js中新增用户验证：

二、修改路由

先显示登录页面

效果：

三、解决cookie写入问题

在http.js中新增配置：

四、登录

Login.vue

<template><v-app><v-content><v-container fluid fill-height><v-layout align-center justify-center><v-flex xs12 sm8 md4><v-card class="elevation-12"><v-toolbar dark color="primary"><v-toolbar-title>乐优商城后台管理</v-toolbar-title><v-spacer></v-spacer></v-toolbar><v-card-text><v-form><v-text-field prepend-icon="person" v-model="username" label="用户名" type="text"/><v-text-fieldprepend-icon="lock"v-model="password"label="密码"id="password":append-icon="e1 ? 'visibility' : 'visibility_off'":append-icon-cb="() => (e1 = !e1)":type="e1 ? 'text' : 'password'"></v-text-field></v-form></v-card-text><v-card-actions><v-spacer></v-spacer><v-btn color="primary" @click="doLogin">登录</v-btn></v-card-actions></v-card></v-flex></v-layout></v-container></v-content><v-dialog v-model="dialog" width="300px"><v-alert icon="warning" color="error" :value="true">用户名和密码不能为空</v-alert></v-dialog></v-app>
</template><script>export default {data(){return{username: '',password: '',dialog: false,e1:false,backPath:''}},beforeRouteEnter(to,from,next){next(vm => {vm._data.backPath = from.path;});},methods: {doLogin() {if (!this.username || !this.password) {this.dialog = true;return false;}const form ={};form.username = this.username;form.password = this.password;this.$http.post("/auth/accredit", this.$qs.stringify(form)).then(resp =>{if (resp.status === 200){//页面跳转if (this.backPath === "/"){this.$router.push("/index/dashboard");} else {this.$router.push(this.backPath);}}}).catch();}}};
</script>

使用beforeRouteEnter获取跳转到登录页面的路径，登录成功后以便跳转到原来的页面

五、用户校验

模板：

      this.verify().then(() => {//TODO}).catch(() => {this.$router.push("/login");});

所有CRUD操作之前都进行用户登录验证。

乐优商城（填坑）——后台登录相关推荐

【javaWeb微服务架构项目——乐优商城day03】——（搭建后台管理前端，Vuetify框架，使用域名访问本地项目，实现商品分类查询，cors解决跨域，品牌的查询）
乐优商城day03 0.学习目标 1.搭建后台管理前端 1.1.导入已有资源 1.2.安装依赖 1.3.运行一下看看 1.4.目录结构 1.5.调用关系 2.Vuetify框架 2.1.为什么要学习U ...
学习乐优商城中遇到的坑
本人暑假期间学习了乐优商城这个项目,历时二十天,遇到了许多的麻烦,应该会有挺多人遇到.所以想记录一下,让大家跳坑. 首先,我建议jar包的版本,都选择和老师的一样,不然会出现一些莫名奇妙的报错. 在本 ...
关于乐优商城登录后不显示用户名的解决方式
在乐优商城登录时,登录不显示用户名,状态如图所示: 原因:我们在网关中少配置了 sensitive-headers: #设置敏感头信息为null 改正后结果展示:
记录一次乐优商城踩的最大的坑！
今天做到了乐优商城的day12天的leyou-search微服务,在执行测试程序"ElasticsearchTest"时报了这样的错误: 仔细对了一下代码,并没有什么错误,于是开始 ...
乐优商城 Day 09（thymeleaf,Rabbitmq,商品详情页，非教程）
乐优商城学习Day09: 注意:此次代码都是在第八天的基础上第八天的链接如下: https://blog.csdn.net/zcylxzyh/article/details/100859210 此次 ...
【javaWeb微服务架构项目——乐优商城day15】——会调用订单系统接口，实现订单结算功能，实现微信支付功能
0.学习目标会调用订单系统接口实现订单结算功能实现微信支付功能源码笔记及资料: 链接:https://pan.baidu.com/s/1_opfL63P1pzH3rzLnbFiNw 提取码:v ...
乐优商城之项目搭建(四)
文章目录 (一)项目分类 (二)电商行业 (三)专业术语 (四)项目介绍 (五)技术选型 (六)开发环境 (七)搭建后台环境:父工程 (八)搭建后台环境:eureka (九)搭建后台环境:zuul ( ...
乐优商城（10）--数据同步
乐优商城(10)–数据同步一.RabbitMQ 1.1.问题分析目前已经完成了商品详情和搜索系统的开发.思考一下,是否存在问题? 商品的原始数据保存在数据库中,增删改查都在数据库中完成. 搜索服务 ...
乐优商城（十）用户注册
文章目录 1. 搭建用户微服务 1.1 用户微服务的结构 1.2 创建 leyou-user 1.3 创建 leyou-user-interface 1.4 创建 leyou-user-service ...

乐优商城（填坑）——后台登录

一、新增全局函数

二、修改路由

三、解决cookie写入问题

四、登录

五、用户校验

乐优商城（填坑）——后台登录相关推荐

最新文章

热门文章