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

我们首先要学习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.collapse
			this.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参数表示是否验证通过，如果验证没通过，触发验证规则rules
			this.$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 } = data
			if (resultCode == 1) {
				// 1. 保存token
				localStorage.setItem('TOKEN', token)
				// 2. 保存用户信息
				let { username, nick, headerimg, role_id } = resultInfo
				this.$store.dispatch('user/saveUser', { username, nick, headerimg })
				// 2.1 保存角色ID
				localStorage.setItem('roleId',role_id)
				// 2.2 保存菜单数据到store
				this.$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)