VueCli3 多页开发 token权限控制的一个框架说明

最新推荐文章于 2024-07-29 11:45:48 发布
置顶 最新推荐文章于 2024-07-29 11:45:48 发布
阅读量1.5k 收藏 4
点赞数 3
分类专栏： 配置 文章标签： CLI3 多页框架 JS VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38850058/article/details/84338506
版权
本文介绍了使用VueCli3搭建的多页开发框架，详细阐述了项目结构、多页配置、环境变量设置、axios封装以及权限控制策略。在每个页面的created事件中检查token，确保权限安全；同时，axios请求根据环境配置自动适配不同接口地址。
摘要由CSDN通过智能技术生成

1：项目结构

在这里插入图片描述
assets目录：放置静态文件的地方
filtres: 放置全局过滤器的地方
pages:放置页面
plugins: 放配置文件

  1. axios.js 设置axios
  2. check-token：操作token的地方
  3. element 全局注册element的地方
  4. http: axios的二次封装请求中转处理

store： vuex存放的位置

2：多页开发

在这里插入图片描述
pages下面的两个目录（index, user），访问页面就是http://localhost:8080/index.html#/+自定义路由 / http://localhost:8080/user.html#/+自定义路由
每个项目都由每个目录下面的router，app.js, app.Vue 单独控制<

最低0.47元/天 解锁文章
trigger-life
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于vue-cli3的vue权限框架搭建
qq_40822000的博客
11-27 585
环境搭建事先准备 本文只注重前端的搭建，后端只提及部分 本框架是基于vue-cli3搭建的，首先你需要安装vue-cli脚手架。 查看你的版本 vue -V 创建你的项目（admin为项目称） vue create admin 然后安装你的各种负载，这里不进行详细说明 我的package.json可以进行参考 "dependencies": { "axios": "^0.1...
VUE3-Forum:使用新vue3框架的基础论坛-基于https
03-31
论坛 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue中v-if与v-show的区别以及使用场景
RenWenJie521的博客
10-31 618
vue中v-if与v-show的区别以及使用场景 区别 1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如...
【Vue】权限控制
最新发布
小秀的博客
07-29 800
用户登录后，服务端返回一个权限树(用树形结构呈现权限数据)，然后我们去解析这个树形结构，得到我们需要的路由表(动态路由对象)，本质上就是一个由路由对象为元素的数组。然后通过 vue 中的动态路由，也就是 addRoutes，动态的添加路由。最后根据路由去渲染多级菜单栏。服务端返回的权限树中包含了指定页面下指定按钮的数据，可以通过 v-if 或者 disable 来控制按钮权限。
vue3框架搭建
weixin_48022521的博客
01-29 1123
目前预估是这些有部分还没用到就先不写了，等用到了再补充。
vue3基础知识+基础框架搭建
LB_bei的博客
05-16 1638
导出export 内容export {内容1,内容2}#导入
Vue2 + Net6 精简通用后台权限框架
arno1988的专栏
11-08 563
采用前后端分离的方式，Vue2 + Net6 精简通用后台权限框架
vue 字典配置_手把手教你通过vue-cli搭建手机端框架
weixin_32508515的博客
01-13 207
前言：欢迎前端的小伙伴们前来围观、学习借鉴，如果你是后端、测试和其他的小伙伴也没关系，如果自己也想玩一下前端，想搭建一个前端的框架，那么不妨静下心来看看这篇文章。如果你不是从事开发工作的人员，内容可能相对而言比较枯燥，但是如果想找错别字，也不妨进来看看。初衷：有的前端的小伙伴要说了，vue-cli不是已经帮我们封装好了webpack(打包)吗？为什么，还要进行二次的搭建和封装呢？我想说的是，是的这...
Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目
2401_84093019的博客
05-05 990
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue框架使用
qq_45645848的博客
01-11 1139
前端vue基础知识总结，汇总
Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制
热门推荐
harsima的博客
09-12 11万+
前端权限控制的本质 权限策略 接口权限控制 页面级访问权限控制 创建路由表 Mock权限列表数据 编写导航钩子 数据级操作权限控制 路由控制完整流程图 NEXT——登录及系统菜单加载 源码 本系列目录 前端权限控制的本质 在管理系统中，感觉最让新手们搞不懂就是权限管理这部份了，而这也是后台管理系统中最基础的部分。 一般说来，权限管理可以分为两种情况：第一种为页面级访问...
Vue-cli + router + vuex进行路由权限管理
weixin_43311271的博客
12-05 2653
此次项目需要用到权限管理的一些知识，就去网上看了些，再结合自己的实际修改了部分，实现了无权限不能访问特殊路径这一功能，特此记录 首先在src文件夹中编辑这样的结构 main.js中引入 router 与 store import router from './router' import store from './store' new Vue({ router, store, r...
vue插件集合24：获取token，存到header中，后台验签token
jdBug
03-12 5503
1：从接口处拿到token 以此接口为例子 this.$http.post(&amp;quot;/api/account/login/&amp;quot;, { account: this.moblie, password: this.password, captcha_image: this.icodenum }) .then(res =&amp;amp;gt; { consol.log（res.data.data....
从零开始开发权限管理系统 - 基于vue-admin-template搭建基础框架
兀坐晴窗独饮茶
01-29 1999
1. 项目准备 1.1 项目介绍 本项目是基于vue-admin-template开发的权限管理脚手架 项目 github地址 : rights-manager-front 1.2 模板下载 下载 vue-admin-template git clone https://github.com/PanJiaChen/vue-admin-template.git 下载完成以后改成自己项目的名字 在项目目录下执行npm install 1.3 删除多余代码 1.3.1 删除多余的组件 删除
vuex状态管理插件用途_使用此Vuex插件在多个选项卡之间共享和同步状态
cuk5340的博客
07-29 417
vuex状态管理插件用途 vuex-multi-tab-state (vuex-multi-tab-state) This Vuex plugin allows you to sync and share the status of your Vue application across multiple tabs or windows using the local storage. 使用此V...
Vue -页面同步插件，很有意思。
烈火成冰
08-17 663
这是一个测试 {{message}} new Vue({ el:'#app', data:{ message:'hellow word' } });
Vue高级应用之常用数据共享方式
weixin_61719769的博客
03-13 425
本篇博客讨论了Vue中常见的三种数据共享方式：props、Vuex和事件总线，并提供了示例代码以展示它们的用法。
【Vue】登录查看权限控制（token）
程序员养成计划
11-16 3149
Vue中的登录查看权限控制
Vue权限控制实战：接口与页面权限详解
本文主要探讨了在Vue应用程序中实现权限控制的方法，...实现Vue中的权限控制需要结合前后端交互，使用合适的工具如axios拦截器处理Token，配合前端路由守卫实现页面级别的权限控制，确保应用的安全性和用户权限的管理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值