目录
（1）渲染分配角色对话框，并请求角色列表数据
1. 为分配角色按钮添加点击事件。点击时，显示分配角色对话款，并获取当前用户的信息列表
2. 添加分配角色对话框。
3. 点击分配角色按钮，触发的方法（获取角色信息）
4. 效果图：
（2）渲染角色列表的select下拉菜单
1. 引入组件
2. 使用下拉列表
3. 效果图：
（3）完成分配角色的功能
1. 点击分配角色对话框的确定按钮，触发事件，进行角色分配
2. 在角色分配方法中
2.1 先判断当前有没有选择角色，如果没有，则提示请选择角色
2.2 根据当前用户id请求角色分配，并将当前选中的角色传入
2.3 如果分配失败，提示分配失败的信息
2.4 如果分配成功，重新获取用户列表数据、提示分配成功、并关闭分配角色对话框
3. 重置分配角色对话框（避免打开时，显示上次的分配结果）
3.1 为对话框添加close事件
3.2 关闭时，清空当前已选的角色 以及 当前用户的信息
4.效果图：
（4）源码
1. Users.vue
<template>
<div>
<!-- 面包屑 导航区 -->
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片区域 -->
<el-card>
<!-- 搜索与添加区域 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<!-- 点击添加用户时，设置addDialogVisible为true，显示对话框 -->
<el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
</el-col>
</el-row>
<!-- 用户信息表格 -->
<el-table :data="userlist" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column prop="username" label="姓名"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="mobile" label="电话"></el-table-column>
<el-table-column prop="role_name" label="角色"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<!-- 作用域插槽，获取该列数据 -->
<template slot-scope="scope">
<!-- 编辑按钮 -->
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="showEditDialog(scope.row.id)"
></el-button>
<!-- 删除按钮 -->
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="removeUserById(scope.row.id)"
></el-button>
<!-- 分配角色按钮。为该按钮添加文字提示 -->
<el-tooltip
effect="dark"
content="分配角色"
placement="top"
:enterable="false"
>
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
@click="setRole(scope.row)"
></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页区域
1 @size-change="handleSizeChange" 页面大小发生变化时，触发事件handleSizeChange
2 @current-change="handleCurrentChange" 当前页发生变化时，触发事件handleCurrentChange
3 :current-page="queryInfo.pagenum" 当前页码
4 :page-sizes="[1, 2, 5, 10]" 一页显示的数据大小（四项可选）
5 :page-size="queryInfo.pagesize" 当前页面含有的数据条数
6 layout="total, sizes, prev, pager, next, jumper"
分别显示总页码，一页大小，前进，当前页，后退，跳转到指定页
7 :total="total" 总数据条数
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
<!-- 添加用户的对话框，变量addDialogVisible控制是否显示该对话框 -->
<el-dialog
title="提示"
:visible.sync="addDialogVisible"
width="50%"
@close="addDialogClosed"
>
<!-- 内容主体区域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
<!-- 点击取消或确定时，隐藏对话框 -->
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
<!-- 修改用户的对话框 -->
<el-dialog
title="修改用户"
:visible.sync="editDialogVisible"
width="50%"
@close="editDialogClose"
>
<!-- 内容主体区域 -->
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
<el-form-item label="用户名">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUserInfo">确 定</el-button>
</span>
</el-dialog>
<!-- 分配角色对话框 -->
<el-dialog
title="分配角色"
:visible.sync="setRoleDialogVisible"
width="50%"
@close="setRoleDialogClosed">
<div>
<p>当前的用户：{{userInfo.username}}</p>
<p>当前的角色; {{userInfo.role_name}}</p>
<p>分配角色：
<!-- 下拉框。
v-model绑定已选中角色的id值；
v-for遍历角色列表，将每个角色显示在下拉表中；
label：要显示的角色名称
value：该角色所对应的id值 -->
<el-select v-model="selectedRoleId" placeholder="请选择">
<el-option
v-for="item in rolesList"
:key="item.id"
:label="item.roleName"
:value="item.id">
</el-option>
</el-select>
</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="setRoleDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
// 验证邮箱的规则(三个参数表示：验证规则，要校验的值，回调函数)
var checkEmail = (rules, value, cb) => {
// 验证邮箱的正则表达式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
// 合法的邮箱
if (regEmail.test(value)) {
return cb()
}
// 不合法的邮箱
cb(new Error('请输入合法的邮箱'))
}
// 验证手机号的规则
var checkMobile = (rules, value, cb) => {
// 验证手机号的正则表达式
const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
// 合法的手机号
if (regMobile.test(value)) {
return cb()
}
// 不合法的手机号
cb(new Error('请输入合法的手机号'))
}
return {
// 获取用户列表的参数对象
queryInfo: {
query: '', // 查询参数
pagenum: 1, // 当前页数
pagesize: 2 // 当前每页显示的数据条数
},
userlist: [], // 用户信息
total: 0, // 总的用户数
addDialogVisible: false, // 控制 添加用户对话框 的显示与隐藏
editDialogVisible: false, // 控制 修改用户对话框 的显示与隐藏
editForm: {}, // 查询到的用户信息对象（显示在修改对话框）
setRoleDialogVisible: false, // 控制 分配角色对话框 的显示与隐藏
userInfo: {}, // 需要被分配角色的用户信息
rolesList: [], // 所有角色的数据列表
selectedRoleId: '', // 已选中角色的id值
// 添加用户的表单数据
addForm: {
username: '',
password: '',
email: '',
mobile: ''
},
// 添加表单的验证规则对象
addFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '用户名的长度在3~10个字符之间', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '密码的长度在6~15个字符之间', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
},
// 修改表单的验证规则对象
editFormRules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
}
}
},
// 生命周期函数
created() {
this.getUserList()
},
methods: {
// 1.获取用户信息列表
async getUserList() {
const { data: res } = await this.$http.get('users', {
params: this.queryInfo
})
if (res.meta.status !== 200) {
return this.$message.error('获取用户列表失败')
}
this.userlist = res.data.users
this.total = res.data.total
console.log(res)
},
// 2.监听“页面大小改变”的事件
handleSizeChange(newsize) {
// 更新当前页面大小
this.queryInfo.pagesize = newsize
// 重新获取用户数据
this.getUserList()
},
// 3.监听“页码值改变”的事件
handleCurrentChange(newPage) {
// 更新当前页码
this.queryInfo.pagenum = newPage
// 重新获取用户数据
this.getUserList()
},
// 4.监听switch开关状态的变化
async userStateChanged(userinfo) {
console.log(userinfo)
// 修改switch开关状态，并获取信息
const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
// 修改失败
if (res.meta.status !== 200) {
userinfo.mg_state = !userinfo.mg_state // 重置回原来状态
return this.$message.error('更新用户状态失败')
}
// 修改成功
this.$message.success('更新用户状态成功')
},
// 5.监听 添加用户对话框 的关闭事件
addDialogClosed() {
// 重置所有的输入框
this.$refs.addFormRef.resetFields()
},
// 6.点击添加用户页面的确定按钮时，进行预校验。如果定义的输入规则全部符合，则valid值为true
addUser() {
this.$refs.addFormRef.validate(async valid => {
// 校验没有通过，不进行跳转
if (!valid) return
// 校验通过，可以发起添加用户的网络请求
const { data: res } = await this.$http.post('users', this.addForm)
// 添加用户失败
if (res.meta.status !== 201) {
this.$message.error('添加用户失败！')
}
// 添加用户成功（隐藏对话框，显示新的用户列表）
this.$message.success('添加用户成功！')
this.addDialogVisible = false // 隐藏添加用户的对话框
this.getUserList() // 重新获取用户列表数据
})
},
// 7.展示修改用户信息的对话框
async showEditDialog(id) {
// 请求指定id的数据
const { data: res } = await this.$http.get('users/' + id)
// 获取数据失败
if (res.meta.status !== 200) {
this.$message.error('查询用户信息失败')
}
// 获取数据成功。将获取的数据放到用户数组,并展示修改对话框
this.editForm = res.data
this.editDialogVisible = true
},
// 8.监听修改对话框的关闭事件。关闭时将对话框中的数据清除
editDialogClose() {
this.$refs.editFormRef.resetFields()
},
// 9.修改用户信息并提交
editUserInfo() {
this.$refs.editFormRef.validate(async valid => {
// 验证没有通过
if (!valid) return
// 验证通过。发起修改用户的数据请求
const { data: res } = await this.$http.put('users/' + this.editForm.id, {
email: this.editForm.email,
mobile: this.editForm.mobile
})
// 修改失败
if (res.meta.status !== 200) {
return this.$message.error('修改用户信息失败！')
}
// 修改成功
// 关闭修改对话框
this.editDialogVisible = false
// 重新获取用户列表
this.getUserList()
// 提示修改成功
this.$message.success('修改用户信息成功！')
})
},
// 10.根据id删除对应用户的信息
async removeUserById(id) {
// 弹框询问用户是否删除数据
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err) // 返回错误信息，相当于 err => {return err}
// 1.如果用户点击取消， 返回值为字符串 cancel
if (confirmResult !== 'confirm') { // 取消删除，显示提示消息
return this.$message('已取消删除')
}
// 2.如果用户点击确定，返回值为字符串 confirm
// 2.1 删除指导id的用户
const { data: res } = await this.$http.delete('users/' + id)
// 2.2 删除失败
if (res.meta.status !== 200) {
this.$message.error('删除用户失败')
}
// 2.3 删除成功。重新获取用户列表
this.$message.success('删除用户成功')
this.getUserList()
},
// 11.展示分配角色的对话框。传入userInfo，以实现和弹框之间的通信，在弹框显示该信息
async setRole(userInfo) {
this.userInfo = userInfo
// 获取角色列表
const { data: res } = await this.$http.get('roles')
// 获取角色列表失败
if (res.meta.status !== 200) {
return this.$message.error('获取角色列表失败！')
}
// 获取角色列表成功
this.rolesList = res.data
this.setRoleDialogVisible = true
},
// 12.为用户分配角色
async saveRoleInfo() {
// 12.1 判断是否已选中分配的角色
if (!this.selectedRoleId) {
return this.$message.error('请选择要分配的角色!')
}
// 12.2 请求为用户分配角色。userInfo当前需分配角色的用户信息
const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectedRoleId })
// 12.3 分配角色失败
if (res.meta.status !== 200) {
return this.$message.error('分配角色失败!')
}
// 12.4 分配角色成功。重新获取用户列表，关闭对话框，提示分配角色成功
this.getUserList()
this.setRoleDialogVisible = false
this.$message.success('分配角色成功!')
},
// 13.重置分配角色对话框。将当前要分配角色的用户信息和已选中的角色id置空，便于下个用户进行角色分配
setRoleDialogClosed() {
this.userInfo = ''
this.selectedRoleId = ''
}
}
}
</script>
<style lang="less" scoped>
</style>
2. Roles.vue
<template>
<div>
<!-- 面包屑 导航区 -->
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
<el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片区域 -->
<el-card>
<!-- 添加角色按钮 区域 -->
<el-row>
<el-col>
<el-button type="primary">添加角色</el-button>
</el-col>
</el-row>
<!-- 角色列表区域 -->
<el-table :data="rolelist" border stripe>
<!-- 展开列 -->
<el-table-column type="expand">
<template slot-scope="scope">
<!-- 使用栅格化布局(分为左右两部分)。共24列，一级占5列，二级和三级占19列 -->
<el-row :class="['bdbottom', i1===0 ? 'bdtop' : '', 'vcenter']" v-for="(item1, i1) in scope.row.children" :key="item1.id">
<!-- 渲染一级权限（左） -->
<el-col :span="6">
<el-tag closable @close="removeRightById(scope.row, item1.id)">{{item1.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- 渲染二级和三级权限（右） -->
<el-col :span="18">
<!-- 使用栅格化布局（分为左右两部分） -->
<!-- 通过for循环，嵌套渲染二级权限 -->
<el-row :class="[i2===0 ? '': 'bdtop', 'vcenter']" v-for="(item2, i2) in item1.children" :key="item2.id">
<!-- 二级权限（左） -->
<el-col :span="7">
<el-tag closable @close="removeRightById(scope.row, item2.id)" type="success">{{item2.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- 三级权限（右） -->
<el-col :span="17">
<el-tag closable @close="removeRightById(scope.row, item3.id)" type="warning" v-for="item3 in item2.children" :key="item3.id">
{{item3.authName}}
</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
<!-- pre调整显示的格式 -->
<!-- <pre>
{{scope.row}}
</pre> -->
</template>
</el-table-column>
<!-- 索引列 -->
<el-table-column type="index"></el-table-column>
<el-table-column label="角色名称" prop="roleName"></el-table-column>
<el-table-column label="角色描述" prop="roleDesc"></el-table-column>
<el-table-column label="操作" width="300px">
<!-- 作用域插槽 slot-scope="scope" -->
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
<el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 分配权限的对话框 -->
<el-dialog
title="分配权限"
:visible.sync="setRightDialogVisible"
width="50%"
@close="setRightDialogClosed">
<!-- 树形控件，显示所有权限信息。data绑定数据源；props属性绑定对象 -->
<el-tree
:data="rightslist"
:props="treeProps"
show-checkbox node-key="id"
default-expand-all
:default-checked-keys="defKeys"
ref="treeRef"></el-tree>
<!-- 底部按钮区域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="setRightDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="allotRights">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
// 所有角色列表数据
rolelist: [],
// 控制分配角色对话框的显示与隐藏
setRightDialogVisible: false,
// 所有权限数据
rightslist: [],
// 树形控件的属性绑定对象
treeProps: {
label: 'authName', // 每个属性对应的值（树中显示的权限名）
children: 'children' // 父子结点通过该属性实现嵌套
},
// 默认选中的结点id值数组
defKeys: [],
// 当前节点的id
roleId: ''
}
},
created() {
this.getRolesList()
},
methods: {
// 1.获取所有角色的列表数据
async getRolesList() {
const { data: res } = await this.$http.get('/roles')
// 获取数据失败
if (res.meta.status !== 200) {
this.$message.error('获取角色列表失败！')
}
// 获取数据成功
this.rolelist = res.data
console.log(this.rolelist)
},
// 2.根据id删除对应的权限。role, rightId分别表示角色，该角色对应的权限id
async removeRightById(role, rightId) {
// 弹框提示用户是否删除
const confirmResult = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
// 取消删除
if (confirmResult !== 'confirm') {
return this.$message.info('取消了删除！')
}
// 确认删除
console.log('确认删除')
// 进行删除操作
const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
// 删除失败
if (res.meta.status !== 200) {
return this.$message.error('删除权限失败')
}
// 删除成功，更新权限列表数据
role.children = res.data
},
// 3.展示分配权限的对话框。role是当前结点的信息
async showSetRightDialog(role) {
// 获取当前结点的id
this.roleId = role.id
// 获取所有用户权限的树形数据
const { data: res } = await this.$http.get('/rights/tree')
// 获取数据失败
if (res.meta.status !== 200) {
return this.$message.error('获取权限数据失败！')
}
// 获取数据成功。把获取到的权限数据保存到rightslist
this.rightslist = res.data
console.log(this.rightslist)
// 递归获取三级结点的id(即获取当前结点role下的所有三级结点的id)
this.getLeafKeys(role, this.defKeys)
this.setRightDialogVisible = true
},
// 4.通过递归形式，获取角色下所有三级权限的id，并保存到defKeys数组中
// node 当前结点； arr 存放三级权限id
getLeafKeys(node, arr) {
// 4.1如果当前节点node不包含children属性（叶节点），则是三级结点
if (!node.children) {
return arr.push(node.id)
}
// 4.2当前结点不是三级节点，继续从孩子结点向下递归
node.children.forEach(item =>
this.getLeafKeys(item, arr))
},
// 5.关闭分配权限对话框时，清空数组defKeys
setRightDialogClosed() {
this.defKeys = []
},
// 6.点击确定，为当前结点分配权限
async allotRights() {
// 6.1 获取选中结点和半选中结点的key
const keys = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]
// 6.2 用，连接
const idStr = keys.join(',')
// 6.3 发送分配权限请求，并将数组idStr传入
const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })
// 6.4 分配权限失败
if (res.meta.status !== 200) {
return this.$message.error('分配权限失败！')
}
// 6.5 分配权限成功。重新获取角色列表，回到角色列表页面；并关闭分配角色对话框
this.getRolesList()
this.setRightDialogVisible = false
this.$message.success('分配权限成功！')
}
}
}
</script>
<style lang="less" scoped>
.el-tag {
margin: 7px
}
.bdtop {
border-top: 1px solid #eee;
}
.bdbottom {
border-bottom: 1px solid #eee;
}
/* 实现居中对其 */
.vcenter {
display: flex;
align-items: center;
}
</style>
3. element.js
import Vue from 'vue'
import {
Button, Form, FormItem, Input, Message, Container, Header, Aside, Main,
Menu, Submenu, MenuItemGroup, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col,
Table, TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox, Tag, Tree, Select, Option
} from 'element-ui'
// 导入弹框提示组件。
// import { Message } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Select)
Vue.use(Option)
// 不同于其它组件，该组件需要全局挂载
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm
4. router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
import Home from '@/components/Home.vue'
import Welcome from '@/components/Welcome.vue'
import Users from '@/components/user/Users.vue'
import Rights from '@/components/power/Rights.vue'
import Roles from '@/components/power/Roles.vue'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
{ path: '/welcome', component: Welcome },
{ path: '/users', component: Users },
{ path: '/rights', component: Rights },
{ path: '/roles', component: Roles }
]
}
]
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数，表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login') return next()
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})
export default router
5. global.css
/*全局样式表*/
html,
body,
#app{
height: 100%;
padding: 0;
margin: 0;
width: 1366px
}
.el-breadcrumb {
margin-bottom: 15px;
font-size: 12px;
}
/*设置users中卡片的阴影区域*/
.el-card {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
/*设置用户信息表格的样式*/
.el-table {
margin-top: 15px;
font-size: 12px;
}
/*解决table表头表格错位问题*/
.el-table--border th.gutter:last-of-type {
display: block!important;
width: 17px!important;
}
/*设置分页器的外边距*/
.el-pagination {
margin-top: 15px;
}
扫一扫
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
