后台管理系统--首页及登录认证

我们首先要学习UI组件的布局：当你仔细阅读过后你会看明白以下代码！

Container 布局容器 | Element Plus

<template><el-container><el-aside :width="asideWidth"><div class="logo"><el-image style="width: 30px; height: 30px" :src="url"  /><h4 v-show="isShowTitle">后台管理系统</h4></div><p class="home-title">首页</p><!-- 菜单 --><Menu :collapse="collapse"></Menu></el-aside><el-container><el-header><el-icon :size="30" @click="onFlod"><component :is="headerLeft"></component></el-icon><div><span class="title">欢迎您 {{ user.nick }}</span><el-dropdown trigger="click"><el-avatar shape="square" :size="30" :src="user.headerimg" /><template #dropdown><el-dropdown-menu><el-dropdown-item>设置</el-dropdown-item><el-dropdown-item @click="onLogout">退出</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></el-header><el-main> <router-view></router-view></el-main></el-container></el-container>
</template>

还是老样子我们要引入组件，注册组件才能正常的使用！


<script>
import { Fold, Location,Expand} from '@element-plus/icons-vue'
import Menu from '@/components/menu.vue'
export default {components: {Fold,Expand,Location,Menu},data() {return {url: 'src/assets/logo.jpeg',user:{},asideWidth:'200px',collapse:true,headerLeft: 'Fold',isShowTitle:true}},methods:{onLogout(){localStorage.removeItem('TOKEN')this.$store.dispatch('user/clearUser')this.$router.replace({path:'/'})},onFlod(){this.collapse = !this.collapsethis.asideWidth = this.collapse?'200px':'70px'this.headerLeft = this.collapse?'Fold':'Expand'this.isShowTitle = this.collapse}},created(){this.user = this.$store.getters['user/user']}}
</script>
<style lang="scss" scoped>
.el-container {width: 100%;height: 100vh;.el-aside {background-color: #2d3436;transition: .3s;.logo {display: flex;color: white;padding: 2px 20px;align-items: center;height: 50px;h4 {margin-left: 10px;}}.home-title {padding-left: 20px;color: rgb(212, 212, 9);}.el-menu{border-right: 0;}}.el-container {.el-header {background-color: #7f8fa6;width: 100%;display: flex;justify-content: space-between;align-items: center;.title {margin-right: 5px;}}}
}
</style>

最终呈现的样式如下：

这里我们重点讲一下登录的认证：（之前给大家的代码里面有，相信有点迷糊），这里我们重点将一下。

首先我们要引入

import { RequestLogin } from '@/api/index.js'

requestLogin里面保存的就是登录的接口

import axios from 'axios'// baseURL: 'https://api.yuguoxy.com',
export const baseURL = 'http://10.7.162.150:8089'
const axiosServer = axios.create({baseURL,timeout: 5000,
})
//请求拦截器
axiosServer.interceptors.request.use(config => {// console.log('请求拦截器 config ', config)// 设置token到authorization头部let token = localStorage.getItem('TOKEN')if (token) {// console.log('config.headers ',config.headers);config.headers['Authorization'] = token;}return config},error => {// 对请求错误做些什么return Promise.reject(error)}
)
//响应拦截器
axiosServer.interceptors.response.use(function (response) {return response.data},function (error) {// 对响应错误做点什么return Promise.reject(error)}
)
export default axiosServer

了解业务流程：

调用登录接口
保存用户信息
保存token
跳转

methods: {onLogin() {// valid参数表示是否验证通过，如果验证没通过，触发验证规则rulesthis.$refs.loginRef.validate(valid => {if (valid) {this.onRequestLogin()}})},async onRequestLogin() {this.isLoading = true // 加载中let { username, password } = this.user// password = sha256(password)let data = await RequestLogin(username, password)let { resultCode, resultInfo, token } = dataif (resultCode == 1) {// 1. 保存tokenlocalStorage.setItem('TOKEN', token)// 2. 保存用户信息let { username, nick, headerimg, role_id } = resultInfothis.$store.dispatch('user/saveUser', { username, nick, headerimg })// 2.1 保存角色IDlocalStorage.setItem('roleId',role_id)// 2.2 保存菜单数据到storethis.$store.dispatch('menu/saveMenu', role_id).then(() => {this.isLoading = false this.$router.push({ path: '/home' }) // 3. 跳转})} else {this.isLoading = false ElMessage({message: '用户名或密码出错!',type: 'warning',})}},},
}

这里讲个知识点，sha256,密码加密传输

下载安装：

npm install js-sha256 -S

引入：

import sha256 from 'js-sha256'

在用的地方，例如密码

 // password = sha256(password)let data = await RequestLogin(username, password)

后台管理系统--首页及登录认证相关推荐

06_04_SSM拉勾教育后台管理系统(权限模块\登录及动态菜单)
拉勾教育后台管理系统(SSM)权限模块权限概念介绍权限:权利(能做的)和限制(不能做的),在权限范围内做好自己的事情,不该看的不看,不该做的不做认证: 验证用户名密码是否正确的过程授权: 对用 ...
Vue项目实战之电商后台管理系统(一) 用户登录模块
目录一.项目概述二.项目初始化 2.1 前端项目初始化步骤 2.2 后台项目的环境安装配置三.用户登录/登出功能实现 3.1 登录功能概述 3.1.1 登录状态保持 3.1.2 登录逻辑: 3. ...
后台管理系统中的登录页面
通常制作登录页面,主要有几方面内容: 1.登录页面要支持自适应,也就是手机登录和PC端登录,都可以根据分辨率或显示进行自动调整: 2.用户登录的方式:账号.手机验证码.微信扫码登录: 3.如何将登录信 ...
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之完成登录功能...
登录窗口已经完成了,现在可以完成最后的工作了,主要就是完成Membership提供者的配置. 首先打开Web.Config文件,在configuration段内添加一个数据库连接定义,代码如下: &l ...
Vue后台管理系统项目——实现登录功能
文章目录登录功能 1. 登录业务流程 2. 登录业务相关技术点 3. 登录-- token 原理分析 4. 登录功能的实现(都记牢点) 登录页面的布局创建登录组件登录组件页面布局登录组件头部布 ...
电商后台管理系统——首页基本实现
侧边栏实现与基本右侧welcome实现 1.home.vue组件已建立好并配置好相关路由,路由规则,开始对home组件进行布局添加样式 <el-container>:外层容器.当子元素中包 ...
React后台管理系统-首页Home组件
1.Home组件要显示用户总数.商品总数和订单总数,数据请求后端的 /manage/statistic/base_count.do接口,返回的是 this.state = { u ...
Axure高保真web端后台管理系统/垃圾回收分类系统/垃圾回收高保真原型设计 /垃圾分类后台管理系统/垃圾回收分类平台//垃圾回收分类智慧管理系统/订单管理/财务管理/系统管理/库存管理/设备管理
Axure高保真web端后台管理系统/垃圾回收分类系统/垃圾回收高保真原型设计 /垃圾分类后台管理系统/垃圾回收分类平台//垃圾回收分类智慧管理系统/订单管理/财务管理/系统管理/库存管理/设备管理 ...
垃圾回收分类系统、垃圾回收高保真原型设计、垃圾分类后台管理系统、垃圾回收分类平台、垃圾回收分类、智慧管理系统、订单管理、财务管理、系统管理、库存管理、设备管理、Axure原型、rp原型
Axure高保真web端后台管理系统.垃圾回收分类系统.垃圾回收高保真原型设计 .垃圾分类后台管理系统.垃圾回收分类平台.垃圾回收分类.智慧管理系统.订单管理.财务管理.系统管理.库存管理.设备管理 ...

后台管理系统--首页及登录认证

后台管理系统--首页及登录认证相关推荐

最新文章

热门文章