vue2后台管理项目总结（一）

0、项目介绍

1、登录/退出功能

1.1 登录业务流程

每个系统都有自己的登录登出逻辑，而我们前端所要做的其实是请求后台，拿到登录权限，带上登录权限，获取用户信息和菜单信息。 在vue项目开发当中，一般都是在全局路由钩做这一系列判断。

① 在登录页面输入用户名和密码

② 调用后台接口进行验证

③ 通过验证之后，根据后台的响应状态跳转到项目主页

// 路由权限信息
router.beforeEach((to, from, next) => {
   
    NProgress.start();
	// 如果需要权限
	if (to.meta.requireAuth) {
   
		// 是否有token
		if (localStorage.getItem("token")) {
   
			// 有个token放行
			next();
		} else {
   
			// 如果没有跳转到首页，查询参数redirect是当前页的path
			Message({
   
				message: '需要先登录！',
				type: 'warning'
			});
			next("/?redirect=" + to.path)
		}
	} else {
   
		// 如果没有权限那么就直接放行
		next();
	}
})

1.2 退出功能实现

基于token的方式实现退出比较简单，只需要销毁本地的token即可。 这样，后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面

<el-button type="info" @click="logout">退出</el-button>

methods: {
   
  logout() {
   
   localStorage.removeItem('token')
    this.$router.push('/login')
  }
}

2、权限管理

2.1 菜单权限（vue3)

以前的菜单路由是直接写死在前端，但是当我们直接访问这个路由时，用户还是可以进入到这个功能页面；后来直接改成动态添加路由的方式router.addRoutes。

• 前端先获取菜单列表
• 根据获取的菜单列表循环添加用户菜单路由集合
• 动态添加路由

2.1.1 在src/store/modules创建permission.js文件

// 导入获取菜单的api
import  {
   GetUserMenu} from '@/api/permission'
// 导入路由
import router from '@/router/index.js'
export default {
   
    state:{
   
        // 全局菜单数组
        menus:[],
    },
    mutations:{
   
        // 更新菜单
        setMenu(state,data){
   
            state.menus = data;
        }
    },
    actions:{
   
        getMenu(context,data){
   
        return new Promise(resolve=>{
   
            // 获取当前的菜单
            GetUserMenu(data)
            .then(res=>{
   
                if(res.data.code==0){
   
                    console.log(res.data)
                    // 更新store中的menus
                    context.commit("setMenu",res.data.list);
                    // 把菜单映射为路由配置
                    // 定义子路由数组
                    let children =[];
                    // 把菜单进行遍历
                    res.data.list.forEach(item=>{
   
                        // 如果当前对象没有children子元素
                        if(!item.children){
   
                            // 直接转换为路由配置添加到children数组里面
                           children.push({
   
                                name:item.name,
                                path:item.linkname,
                                component:()=>import('@/views'+item.component)
                            })
                        }else{
   
                            // 如果有子元素
                            for(let i=0;i<item.children.length;i++){
   
                                // 遍历子元素并报所有的子元素转为路由配置 添加到children数组里面
                                children.push({
   
                                    name:item.children[i].name,
                                    path:item.children[i].linkname,
                                    component:()=>import('@/views'+item.children[i].component)
                                })
                            }
                        }
                        
                    })
                    // children.push({"path":'',redirect:'/admin/dash'})
                    // 动态的配置路由 admin路由（没有权限的用户进入不到他不对应的菜单）
                   
                    var admin ={
   
                        name: 'admin',
                        path: '/admin',
                        component: ()=>import('@/views/admin/AdminView.vue'),
                        children  
                      } 
                    router.addRoute(admin)
                    resolve(admin);
                    
                }
            })
        })   
        }
    }
}

2.1.2 在 src/router/index.js修改

import {
    createRouter, createWebHashHistory } from 'vue-router'
import store from '@/store/index.js'
const routes = [
  {
   
    path: