Vue-根据脚色天生动态路由及菜单-1-vue脚手架创建项目

藏宝库编辑 · 2024-10-5 05:53:24

根据登录用户的脚色，天生路由后addRoute、天生菜单栏根本思绪：
    1. 用户在登录页输入用户名+暗码哀求后端 login接口 拿到 token 后生存到cookie或sessionStorage中；
    2. 接着携带拿到的token哀求后端 userInfo 接口，得到用户根本信息及脚色role；
    3. 前端维护路由表，除了不必要权限限定的页面外其余每个路由添加meta数据，格式如 meta:{ role:['admin'] }，表现该路由页面可以被哪些脚色访问；
    4. 用userInfo接口拿到的role数据，过滤出路由表中，当前用户能访问的路由并生存到Vuex中，利用 Vue-Router的 addRoute API循环添加路由；
    5. 菜单栏利用了 ElementUI 的 NavMenu 导航菜单组件，拿到Vuex生存的路由数据循环即可，由于菜单可能有多个层级，利用了组件递归。

当地情况：
    Windows10体系、Node 16.8、Vue CLI 4.5.13

根本流程：
1. 利用 Vue Cli 脚手架创建项目、安装依靠
打开终端输入 vue create vue-admin-simple回车，利用方向键选择 "Manually select features" 自界说选择项目必要利用的依靠；
        选中 Manually select features 后回车，(方向键上下选择，按空格键选中和取消选中)，选中“Router”和“Vuex”后回车(测试项目中利用了Vuex来生存路由和用户信息)；
        回车后让选择vue版本（这里先用2.x版本，背面再写3.x版本记载）、路由是否利用History模式、ESLint设置、何时用ESLint格式化、是否把babel和ESLint等的设置项生存到各自的单独设置文件中还是生存到package.json中、是否不生存为预设设置这几步可以依次回车默认选择即可，也可以根据本身风俗及项目必要修改选择。
        之后回车即开始安装项目依靠了。等候依靠下载完成即可进入项目运行查察。
2. 进入项目目次启动项目、利用VSCode打开项目编辑
终端中继续输入 cd vue-admin-simple 回车后，运行 yarn serve开始编译项目。编译完成在浏览器地点栏输入 localhost:8080 回车查察项目。

下篇文章继续记载天生测试页面和路由，实现静态登录及根本页面结构layout。

Vue-根据脚色天生动态路由及菜单-1-vue脚手架创建项目

所属分类: 问答交流

新帖推荐: 30日

推荐作品