token鉴权与权限菜单

token鉴权：用户登陆后，后端会生成一个token令牌返回给前端，前端需要保存在本地。

在其他需要token鉴权的接口调用时，携带token设置请求头Authorization发送给后端，后端会验证token是否过期，如果没有过期，就响应前端请求的数据。

token的应用：统一登录认证（借助token判断用户是否登录）。

import router from "./router";
// 全局前置导航
router.beforeEach(async (to, from) => {
    // return true 放行
    // return false 不放行
    // to 要去哪个路由；from 从哪个路由过来的
    let path = to.path.split('?')[0]
    if(to.path == '/login') {
        return true
    }
    let token = localStorage.getItem('token') // 查看是否登录，未登录
    if(!token) {
        // 如果不存在，跳转到登录页
        router.replace({path: '/login'})
    } else {
        return true
    }
})

动态权限菜单：

1.根据角色的id，获取用户的权限菜单列表

2.利用递归格式化列表成路由router对应的结构，使用import.meta.glob获取views下所有的组件，

再利用路径找到viewsComponents中对应的组件

// import.meta.glob获取路径下所有的组件
const viewsComponents = import.meta.glob('@/views/**/*.vue')
export const useMenu = list => {
    const newMenuList = []
    if(!list.length) return
    list.forEach(subItem => {
        let children
         // 判断是否又children子组件，有的话，也需要格式化
        if (subItem.children && Array.isArray(subItem.children)) {
            children = useMenu(subItem.children)
        }
        const { path, meta, label, id, iconCls } = subItem
        const keys = {
            id,
            path,
            meta,
            label,
            children,
            icon: iconCls
        }
        if( path.indexOf('main') !== -1 ) { // 判断是否为一级菜单，我这里一级菜单为home组件
            keys['component'] = ()=>import('@/views/Home.vue')
        } else {
            // 通过路径获取到组件信息
            keys['component'] = viewsComponents[`/src/views/plateform${path}.vue`]
        }
        newMenuList.push(keys)
    })
    return newMenuList
}

 3.将格式化后的权限菜单，利用router实例对象的addRoute方法动态添加路由，在动态添加路由的同时，使用store保存权限菜单，用于在主页面菜单列表遍历动态显示。