2022-07-04 vue项目-通用后台管理系统(三) 其他页面路由守卫回login页,使用ElementUI进行home主页布局,主页设置登录退出功能,对Aside侧边栏的菜单数据进行动态绑定

原创

已于 2023-03-24 13:47:09 修改 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #elementui #登录守卫

于 2022-07-04 14:23:14 首次发布

本文介绍了如何在Vue项目中利用ElementUI快速布局home主页，并实现登录退出功能。详细讲解了如何设置路由守卫，确保未登录用户无法访问其他页面。此外，重点阐述了动态绑定Aside侧边栏菜单数据的过程，包括从vue.config.js获取数据并在Home.vue中动态显示的步骤。同时，文章还涵盖了路由导航守卫的种类及其用法。

文章目录

零.设置路由守卫:需要先登录才能访问其他页面

router.index.js

import Vue from "vue"
import VueRouter from "vue-router"
import Login from "./views/Login.vue"
import Home from "./views/Home.vue"

Vue.use(VueRouter);

// 在routes里配置路径
const routes=[{
   
   
    path:"/",
    component:Login
},{
   
   
    path:"/Login",
    name:"Login",
    component:Login
},{
   
   
    path:"/Home",
    name:"Home",
    component:Home
}];

// 注册路由
const router=new VueRouter({
   
   
    routes
});

/*****路由守卫:如果没有登录,就跳转到登录页*****/
router.beforeEach((to,from,next)=>{
   
   
    // 已在登录页
    if(to.path=="/Login") return next();
    // 获取在登录页提交的token
    const tokenStr=window.sessionStorage.getItem("token");
    // 判断token是否存在,否:返回到登录页
    if(!tokenStr){
   
   
        next("./Login");
        return;
    }
    next();
});

// 暴露接口
export default router;

效果:若未登录,在地址栏输入http://localhost:8080/#/Home是打不开首页的

一.使用ElementUI进行home主页快速布局,并设置登录退出功能

<template>
  <div class="home">
  <el-container>
    <el-header>
      <el-button type="success" @click="logOut()" size="mini">退出登录</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
  </div>
</template>
<script>
export default {
   
   
  name: 'Home',
  data(){
   
   
    return{
   
   
      loginObj:{
   
   
        username:"admin",
        password:123456
      }
    }
  },
  methods:{
   
   
    logOut(){
   
   
      // 清空数据
      window.sessionStorage.clear();
      // 点击"退出登录"后:跳转到登录界面
      this.$router.push("/");
    }
  }
}
</script>
<style scoped>
.el-container{
   
   
  height:100vh;
}
.el-header{
   
   
  display: flex;
  /* el-header下的唯一子元素el-button退出登录会显示在右上角 */
  justify-content: end;
  background: #b3c0d1;
  line-height: 60px;
}
.el-aside{
   
   
  background: #d3dce6;
  line-height: 400px;
}
.el-main{
   
   
  background: #e9eef3;
  line-height: 400px;
}
</style>

在这里插入图片描述

二.左侧菜单Aside布局

1.编写一个mock接口到vue.config.js

module.exports = {
   
   
  lintOnSave: false,
  configureWebpack: {
   
   
    devServer: {
   
   
      /*****mock编写的接口(模拟后台返回的接口)*****/
      before(app) {
   
   
        app.get("/api/menu", (req, res) => {
   
   
          res.json({
   
   
            status: "ok",
            data: [
              {
   
   
                id: 1,
                name: "用户管理",
                child: [
                  {
   
   
                    id: 1,
                    name: "用户列表",
                    path: "/home/users",
                  },
                ],
              },
              {
   
   
                id: 2,
                name: "员工管理",
                child: [
                  {
   
   
                    id: 2,
                    name: "员工列表",
                    path: "/home/rote",
                  },
                ],
              },
              {
   
   
                id: 3,
                name: "商品管理",
                child: [
                  {