后台管理案例

一、安装和配置路由

1. 安装路由

   npm i [email protected] -S
   

2. 创建路由模块 src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter()

export default router

3.main.js 挂载路由

// 1.导入模块
import router from '@/router'
new Vue({
   
    
  render: h => h(App),
  router // 2.挂载路由
}).$mount('#app')

二、基于路由渲染登录组件

1. router/index.js路由模块声明路由规则

// 1.导入登录组件
import MyLogin from '@/components/MyLogin.vue'

const router = new VueRouter({
   
    
  routes: [
    // 2.登录的路由规则
    {
   
    
      path: '/login',
      component: MyLogin
    }
  ]
})

2. App.vue 组件启用 路由占位符

     <div>
       <!-- 路由占位符 -->
       <router-view></router-view>
     </div>
   

   3. 路由重定向

   const router = new VueRouter({
        
         
     routes: [{
        
         
       // 路由重定向
         path: '/',
         redirect: '/login'
       },
       // 登录的路由规则
       {
        
         
         path: '/login',
         component: Login
       }
     ]
   })
   

三、模拟登录功能

    1. `MyLogin.vue` 输入框双向绑定
     - trim 去除多余空格

<input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off" v-model.trim="username" />
 <input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="password" />

  data() {
    return {
      username: '',
      password: ''
    }
  }

2. 给重置按钮实现重置功能

<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
// 重置
reset() {
  this.username = ''
  this.password = ''
},

3. 给登录按钮实现登录功能
   • 登录成功 –> 存储token
   • 登录失败 –> 移除token

<button type="button" class="btn btn-primary" @click="login">登录</button>
// 登录
login() {
  if (this.username === 'admin' && this.password === '123456') {
    localStorage.setItem('token', 'Bearer xxxx')
    this.$router.push('/home')
  } else {
    localStorage.removeItem('token')
  }
}

Token 认证时 token格式

Bearer Bearer + 空格 固定写法

四、后台主页基础布局

1. 声明后台主页/home的路由规则

   • router/index.js

   // 导入主页组件
   import Home from '@/components/MyHome.vue'
   

       // 后台主页
       {
        
         
         path: '/home',
         component: Home
       }
   

2. MyHome.vue挂载组件

  <div class="home-container">
    <!-- 头部区域 -->
    <MyHeader></MyHeader>
    <!-- 页面主体区域 -->
    <div class="home-main-box">
      <!-- 左侧边栏 -->
      <MyAside></MyAside>
      <!-- 右侧主体区域 -->
      <div class="home-main-body">
  
      </div>
    </div>

五、退出登录并控制访问权限

1. 实现退出功能
2. 绑定按钮
3. 退出
   • 清空token
   • 跳转登录页面

src/components/subcomponents/MyHeader.vue
<button type="button" class="btn btn-light" @click="logout">退出登录</button>
 // 退出登录
    logout() {
      localStorage.removeItem('token')
      this.$router.push('/login')
    }

2. 访问权限控制 全局前置守卫

   /src/router/index.js

router.beforeEach(function(to,from,next){
   
    
  if (to.path === '/home') {
   
    
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
   
    
      next()
    } else {
   
    
      // 没有登录，强制跳转到登录页
      next('/login')
    }
  } else {
   
    
    next()
  }
})

六、子路由嵌套显示

1. 左侧边栏 添加路由跳转链接

MyAside.vue
 <li class="menu-item">
        <router-link to="/home/users">用户管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/rights">权限管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/goods">商品管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/orders">订单管理</router-link>
      </li>
      <li class="menu-item">
        <router-link to="/home/settings">系统设置</router-link>
      </li>

2. MyHome.vue 子路由占位符

 <!-- 右侧主体区域 -->
 <div class="home-main-body">