自己开发若依管理系统4——登录页与路由守卫

• 版本：vue3.3.4+elementplus2.7.3

前几篇已经把登录接口和权限控制拦截器搞定了，现在轮到前端啦。找到之前学习的一个空项目复制过来，package.json安装之后跑起来个空项目。

• 引入elementplus

它默认是英文，需要启用中文。还引入了它的图标系统

//element-ui
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
app.use(ElementPlus, {
    locale: zhCn,
});

• 开发登录页

用elementplus照这个样子搞出来就行了。小技巧：IDEA可以安装阿里的通义千问插件，可以让它写一些布局样式，还是挺方便的。

• 引入vue-router

毫无疑问，有了登录页之后就需要路由（浏览器地址栏）访问。

import router from "./router";
app.use(router);

• 路由守卫

意思就是在每一次路由发生变化时都会执行这段逻辑。这里主要是判断当前没有token，如果有token，就去请求接口获取用户信息（其中有该用户有权限访问的菜单数据），构造动态路由。如果没有token，若是登录页等白名单，则继续访问，若是其他路由则跳转到登录页

router.beforeEach((to, from, next) => {
    document.title = Properties.VITE_TITLE
    const token = getToken()
    if(token){
        // 若有token
        //1、更新过期时间
        setToken(token)
        if (to.path === '/login') {
            next({ path: '/' })
        }else {
            //2、若pinia中有用户数据（也就是路由）
            const userInfoStore = useUserInfoStore()
            let {user, initUserInfo} = userInfoStore
            if(user){
                next()
            }else {
                initUserInfo().then((data:any) => {
                    constructDynamicRoute(data.menus)
                    // 如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由
                    next({ ...to, replace: true })
                }).catch(() => {})
            }
        }
    }else {
        // 若没有token，则跳转到登录页
        if(whiteList.indexOf(to.path) !== -1){
            next()
        }else {
            next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
        }
    }
})

• END