router-index.jd-全局守卫

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'Vue.use(VueRouter)const routes = [// 登录页面{path: '/',redirect: "/login",},{path: '/login',name: 'login_view',component: () => import('../views/LoginView.vue')},// 主页面{path: '/home',name: 'home_view',component: () => import('../views/HomeView.vue'),children: [{// 添加页面path: "/list",name: "list_view",component: () => import("../views/UserListView.vue")},{path: '/sanlian',name: "sanlian_view",component: () => import('../views/SanLianView.vue')},]}
]const router = new VueRouter({routes
})export default router
// 全局守卫
router.beforeEach((to, from, next) => {if (to.path == '/login') return next();let token = store.state.userInfo.token;if (!token) return next("/login");next()
})

store-index.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {userInfo: sessionStorage.userInfo ? JSON.parse(sessionStorage.userInfo) : ""},getters: {},mutations: {// 写登录的时候写saveInfo(state, userInfo) {state.userInfo = userInfo// 存到本地sessionStorage.setItem("userInfo", JSON.stringify(userInfo))},// 清除token--退出登录的时候写delInfo(state) {state.userInfo = "";// 清除本地信息sessionStorage.removeItem("userInfo")}},actions: {},modules: {}
})

main.js-请求拦截器

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入axios
import axios from 'axios'
// 行政区划三级选择
import RegionSelect from './views/SanLianView.vue'
// 行政区划三级选择
Vue.use(RegionSelect)
// 行政区划三级选择
Vue.component('regionSelect', RegionSelect)// element
Vue.use(ElementUI);Vue.config.productionTip = false
// 将aixos配置vue原型中--全局都可以使用
Vue.prototype.$http = axios// 配置全局请求路径
axios.defaults.baseURL = 'http://www.wuhaijun888.com:8888/api/private/v1/';
// 添加请求拦截器---写完登录的时候再写
axios.interceptors.request.use(function (config) {// 在发送请求之前添加tokenif (store.state.userInfo.token) {config.headers.Authorization = store.state.userInfo.token;}return config
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});new Vue({router,store,render: h => h(App)
}).$mount('#app')

App.vue

<template><div id="app"><router-view/></div>
</template><style lang="scss"></style>

主页面--父页面-----------------------------

<template><div><el-container><el-header><span> <b>后台管理</b> </span><span class="right_btn">{{ $store.state.userInfo.username }}<el-button type="info" @click="logout">退出登录</el-button></span></el-header><el-container><el-aside width="200px"><p><router-link to="/list">用户管理</router-link></p><p><router-link to="/list">权限管理</router-link></p></el-aside><!-- 注意占位符 --><el-main><router-view /> </el-main></el-container></el-container></div>
</template>

<script>
export default {name: "home_view",data() {return {};},methods: {// 回到登录页面---退出登录写logout() {this.$store.commit("delInfo");// 跳转登录页面this.$router.push("/login");},},
};
</script>

<style>
.right_btn {float: right;
}
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;height: 60px;line-height: 60px;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;height: 600px;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;height: 600px;
}body > .el-container {margin-bottom: 40px;
}.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {line-height: 260px;
}.el-container:nth-child(7) .el-aside {line-height: 320px;
}
</style>

登录页面--子页面

<template><div class="login_mtk"><p>用户名: <input type="text" v-model="username" /></p><p>密码: <input type="password" v-model="password" /></p><el-button type="primary" @click="deng">登录</el-button><el-button type="primary">取消</el-button></div>
</template><script>
export default {name: "login_view",data() {return {username: "admin",password: "123456",};},methods: {// 登录deng() {this.$http.post("/login", {username: this.username,password: this.password,}).then((response) => {let { data: res } = response;console.log(res);// 保存数据this.$store.commit("saveInfo", res.data);// 跳转页面this.$router.push("/home");});},},
};
</script><style>
.login_mtk {width: 300px;height: 300px;border-radius: 20px;background: paleturquoise;position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin:  auto;
}
</style>

添加显示页面---子页面

<template><!-- userList要与下面对应数组 --><div class="userList"><!-- 添加 --><div class="top_add"><span><input type="text" v-model="query" /><el-button type="primary" icon="el-icon-search" @click="sousuo">搜索</el-button></span><el-button class="el-icon-plus" @click="addWindow = true"></el-button></div><!-- 添加--- --><!-- 表单 --><div class="main"><table border="1px"><thead><th>序号</th><th>用户名</th><th>邮箱</th><th>电话</th><th>角色</th><th>操作</th></thead><tbody><tr v-for="(item, index) in userList" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.username }}</td><td>{{ item.email }}</td><td>{{ item.mobile }}</td><td>{{ item.role_name }}</td><td><el-button class="el-icon-delete" @click="del(item.id)">删除</el-button><el-button class="el-icon-edit" @click="edit(item.id)">编辑</el-button></td></tr></tbody></table></div><!-- 表单完 --><!-- 分页 --><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[2, 4, 6, 8]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div><!-- 添加模态框 --><div class="addmtk" v-if="addWindow"><p>用户名: <input type="text" v-model="addForm.username" /></p><p>密码: <input type="password" v-model="addForm.password" /></p><p>邮箱: <input type="text" v-model="addForm.email" /></p><p>电话: <input type="text" v-model="addForm.mobile" /></p><el-button class="el-icon-close" @click="addWindow = false">取消</el-button><el-button class="el-icon-check" type="primary" @click="add">确定</el-button></div><!-- 添加模态框完 --><!-- 编辑模态框 --><div class="editmtk" v-if="editWindow"><p>用户名: <input type="text" v-model="editForm.username" disabled/></p><p>邮箱: <input type="text" v-model="editForm.email" /></p><p>电话: <input type="text" v-model="editForm.mobile" /></p><el-button class="el-icon-close" @click="editWindow = false">取消</el-button><el-button class="el-icon-check" type="primary" @click="editAdd">确定</el-button></div><!-- 编辑模态框完 --></div>
</template>

<script>
export default {name: "list_view",data() {return {userList: [],addForm: {},addWindow: false, //显示隐藏添加模态框editForm: {},editWindow: false,query: "", //搜索currentPage: 1, //默认第几页pageSize: 5,    //默认每页显示几条数据total: 0,};},created() {this.getUserList();},methods: {// 渲染函数==============================================================getUserList() {this.$http.get("/users?" +`pagenum=${this.currentPage},&pagesize=${this.pageSize},&query=${this.query}`).then((response) => {let { data: res } = response;if (res.meta.status == 200) {this.userList = res.data.users;this.total = res.data.total;}});},// 删除==================================================================================del(id) {this.$http.delete("/users/" + id).then(() => {this.getUserList();});},// 添加=======================================================================================async add() {console.log(this);let { data: res } = await this.$http.post("/users", this.addForm);console.log(res);if (res.meta.status == 201) {this.getUserList();// 关闭窗口this.addWindow = false;this.addForm = {};}},// 编辑回显==========================================================================================edit(id) {this.$http.get("/users/" + id).then((response) => {let { data: res } = response;this.editForm = res.data;this.editWindow = true;});},// 编辑提交=============async editAdd() {let { data: res } = await this.$http.put("/users/" + this.editForm.id,this.editForm);if (res.meta.status == 200) {// 关闭编辑窗口this.editWindow = false;this.getUserList();}},// 搜索============================================================sousuo() {this.getUserList();},// 分页====================================================handleSizeChange(val) {this.pageSize = val;this.getUserList();},handleCurrentChange(val) {this.currentPage = val;this.getUserList();},},
};
</script>

<style>
table {width: 100%;
}
.top_add {float: right;
}
/* addmtk */
.addmtk {width: 400px;height: 400px;border-radius: 20px;background: paleturquoise;position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}
.editmtk {width: 400px;height: 400px;border-radius: 20px;background: paleturquoise;position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}
</style>