基于Vue的会员管理系统（五）

写这篇文的时候发现太多的界面实现的流程都差不多，基本都是从ui库中获取想要的组件，然后配置路由。重复的工作我不写或者简略写写，只详细写自己比较生疏的技术实现。

项目布局的实现

路由配置

1. 在src\components 目录下新建布局组件文件Layout.vue（基础布局的文件都放在components目录下）
2. 在router中增加路由，进入系统的第一个页面（即首页），路由路径一般设置为‘/’

布局实现

1.可以从ui库中找喜欢的布局组件，但简单的布局自己写样式就可以了（本项目布局是自己写的）
2.基础布局组件的组成部分，放在components目录下创建新的文件夹内，组成部分的样式写在基础布局组件（layout）内

3.在layout中导入子组件，注册子组件，渲染在template中

<template>
  <div>
    <app-header></app-header>
    <app-navbar></app-navbar>
    <app-main></app-main>
  </div>
</template>
<script>
// 会导入 ./AppHeader 下面的 index.vue组件
import AppHeader from './AppHeader'
import AppNavbar from './AppNavbar'
import AppMain from './AppMain'

export default {
    components: {AppHeader, AppNavbar, AppMain}
}
</script>

4.普通组件放在views目录中
每个目录下都有一个index.vue文件

组件渲染的方式（*）

1.router中导入全部组件并添加路由（layout中包括了组成布局的三个组件）
router.js代码如下

import Vue from "vue";
import Router from "vue-router";
import Login from "./views/login"
import Layout from "@/components/Layout.vue"
import Home from '@/views/home'
import Member from '@/views/member'
import Supplier from '@/views/supplier'
import Goods from '@/views/goods'
import Staff from '@/views/staff'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/',
      name: 'layout',
      component: Layout,
      redirect: '/home', //默认选中该路由
      children: [
        {
          path: '/home',
          component: Home,
          meta: { title: '首页' }
        },
      ]
    },
    {
      path: '/member',
      component: Layout,
      children: [{
        path: '/member/',
        component: Member,
        meta: { title: '会员管理' }
      }]
    },
    {
      path: '/supplier',
      component: Layout,
      children: [{
        path: '/supplier/',
        component: Supplier,
        meta: { title: '供应商管理' }
      }]
    },
    {
      path: '/goods',
      component: Layout,
      children: [{
        path: '/goods/',
        component: Goods,
        meta: { title: '商品管理' }
      }]
    },
    {
      path: '/staff',
      component: Layout,
      children: [{
        path: '/staff/',
        component: Staff,
        meta: { title: '员工管理' }
      }]
    },
  ]
})

2.main.js导入router，在main的vue实例中注册router

import Vue from "vue";
// 注意引入在 Vue的下面
//  ElementUI 组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from "./App.vue";
//导入router
import router from "./router";

// 使用 ElementUI
Vue.use(ElementUI);

new Vue({
//注册router
  router,
  render: h => h(App)
}).$mount("#app");

3.vue实例渲染在app.vue中

退出系统逻辑实现

1. 在api下的login.js中添加logout函数，在组件中导入该函数

export function logout(token) {
    return request({
        url: `/user/logout`,
        method: 'post',
        data: {
            token //token: token
        }
    })
}

2. 把该api中的函数import进目标组件中
3. 退出系统实现代码

通过key值获取token——>将参数传入logout函数中——>在localstorage中移除token和用户信息——>回到登录页面

// 退出系统
    handleLogout() {
      logout(localStorage.getItem("mxg-msm-token")).then(response => {
        const resp = response.data;
        if (resp.flag) {
          // 退出成功
          // 清除本地数据
          localStorage.removeItem("mxg-msm-token");
          localStorage.removeItem("mxg-msm-user");
          // 回到登录页面
          this.$router.push("/login");
        } else {
          this.$message({
            message: resp.message,
            type: "warning",
            duration: 500 // 弹出停留时间
          });
        }
      });
    },

权限设置（*）

需求：当用户未登录时，不让访问非登录页面，应该回到登录页面进行登录。
实现：采用 Vue Router 中的路由前置钩子函数( beforeEach )，在前置中根据路由地址校验是否此路由是否允许访问。

1. 新建 src\permission.js 权限校验文件

 import router from './router'
 import {getUserInfo} from './api/login'

 router.beforeEach((to, from , next) => {
    //  获取token
    const token = localStorage.getItem('mxg-msm-token')
    console.log('token', token)
    
    if(!token) {
        // 如果没有获取到，
        // 要访问非登录页面，则不让访问，加到登录页面 /login
        if(to.path !== '/login') {
            next({path: '/login'})
        }else {
            // 请求登录页面 /login
            next()
        }
    }else {
        //  获取到token, 
        //  请求路由 /login ，那就去目标路由
        if(to.path === '/login') {
            next()
        }else {
            //  请求路由非登录页面，先在本地查看是否有用户信息，
            const userInfo = localStorage.getItem('mxg-msm-user')
            if(userInfo) {
                // 本地获取到，则直接让它去目标路由
                next()
            }else {
                // 如果本地没有用户信息， 就通过token去获取用户信息，
                getUserInfo(token).then(response => {
                    const resp = response.data
                    if(resp.flag) {
                        // 如果获取到用户信息，则进行非登录页面，否则回到登录页面
                        // 保存到本地
                        localStorage.setItem('mxg-msm-user', JSON.stringify(resp.data))
                        next()
                    }else {
                        // 未获取到用户信息，重新登录 
                        next({path: '/login'})
                    }
                })
            }
        }
    }
 })

通过router路由前置钩子函数 beforeEach() ，在跳转路由前进行拦截判断是否已经登录，如果已登录，则进行路由跳转，如果没有则回到登录页前置路由钩子函数
to ：即将要进入的目标路由对象
from ：当前导航正要离开的路由对象
next : 调用该方法，进入目标路由

2. 将权限添加到全局中
在main.js中添加代码

import './permission'