vuejs2.0 vsCode router前后端分离权限 vueAdmin后台基础模板
感觉不错的开源项目,所以搜集资料来细致的剖析,帮助更多人尽快步入后台系统的开发,其实后台项目有两个最基础最重要的东西就是:权限验证和安全性,关于VSCode是最近很火的编辑器不做过多说明,下面的参考资料有详细讲解
第三方参考资料
- 手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
- 导航守卫
- 请求、响应拦截器
- me-admin-template开发文档
- me-admin-template
- me-admin-template在线预览地址
- 一代女前辈赛冷思sls-admin-vue在线预览地址
- 让我启蒙的花裤衩vueAdmin-template在线预览地址
根据环境读取配置
- 在项目中新建 config 文件夹
- 添加 index.js 并写入export default require('./_' + process.env.NODE_ENV)
- 根据
vue-cli
生成的环境变量(根目录config
设置)有三个环境:development,testing,production,config 目录结构如下所示
vue-cli 默认只提供了dev和prod两种环境。但其实正真的开发流程可能还会多一个sit或者stage环境,就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量
"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",
之后在代码里自行判断,想干就干啥
var env = process.env.NODE_ENV
=== 'production' ? config.build.prodEnv : config.build.sitEnv
建议使用npm install --registry=https://registry.npm.taobao.org安装依赖包使用cnpm install或者update 它的包是一个link,会有各种诡异的bug
添加请求、响应拦截器,@/_extends/ui,在_extends中定义公共弹框以及进度条通过index向外提供方法接口
import axios from 'axios'
import _config from '@/_config'
import $ui from '@/_extends/ui'
// import qs from 'qs'const instance = axios.create({baseURL: _config.apiBaseUrl, // api的base_urltimeout: 10000 // 请求超时时间// transformRequest: data => qs.stringify(data)
})
// request拦截器
instance.interceptors.request.use(e => {e.method = _config.isMockTest ? 'GET' : e.methode.url = _config.suffix ? e.url + _config.suffix : e.urle.params = e.params || {}e.headers = e.headers || {}if (localStorage.token) {e.headers['Authorization'] = localStorage.token//后端会验证每一个涉及请求的操作,验证其是否有该操作的权限,//每一个后台的请求不管是 get 还是 post 都会让前端在请求 //header里面携带用户的 token,后端会根据该 //token 来验证用户是否有权限执行该操作。}return e},error => ({ status: 0, msg: error.message })
)
// respone拦截器
instance.interceptors.response.use(response => {const resp = response.dataif (resp && resp.status === 0 && resp.msg) {$ui.pages.warn(resp.msg)}if (response.status === 200) {return resp}return response},error => {const err = { status: 0, msg: '服务器异常' }if (error.message &&(error.message.indexOf('403') > -1 || error.message.indexOf('401') > -1)) {err.msg = '权限校验失败,请重新登录'}$ui.pages.warn(err.msg)console.log('err' + error) // for debugreturn Promise.reject(err)}
)export default instance
用户登录成功之后,我们会在全局钩子router.beforeEach中拦截路由,判断是否已获得token,在获得token之后我们就要去获取用户的基本信息了
- 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到cookie中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)
- 权限验证:通过token获取用户对应的 role,动态根据用户的 role 算出其对应有权限的路由,通过 router.addRoutes 动态挂载这些路由
- 两步验证:其实就是账号密码验证之后绑定第三方平台,登陆成功后不重定向到首页而是弹出第三方平台登陆窗口
scrollBehavior,前端路由切换新路由想要页面滚动到顶部
import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './routes'
import logic from './logic'
Vue.use(Router)const router = new Router({scrollBehavior(to, from, savedPosition) {if (savedPosition) return savedPositionconst position = {}if (to.hash) {position.selector = to.hash}position.x = 0position.y = 0return position},routes
})
router.beforeEach(logic.beforeEach)
router.afterEach(logic.afterEach)export default router
前端后端 控制权限
- 后端的确也是有权限验证的,但它的验证其实是针对业务来划分的,比如超级编辑可以发布文章,而实习编辑只能编辑文章不能发布,但对于前端来说不管是超级编辑还是实习编辑都是有权限进入文章编辑页面的。
- 还在更新中。。。
vuejs2.0 vsCode router前后端分离权限 vueAdmin后台基础模板相关推荐
- 开源项目:时光后台管理系统 前后端分离项目,后台系统模板 时光大魔王
最近对自己的之前开源项目进行优化,发现每个项目的后台管理系统都有大大小小的Bug和之前没考虑到的优化,于是这段时间重新从零构建了Vue2后台管理系统模板. 作者:时光 | 当前版本:v1.0.6 前端 ...
- 视频教程-springboot+Vue整合前后端分离权限后台管理系统-Java
springboot+Vue整合前后端分离权限后台管理系统 拥有八年的Java项目开发经验,擅长Java.vue.SpringBoot.springCloud.spring.springmvc.myb ...
- SpringCloud Alibaba+layui前后端分离权限管理系统
cloud_layui 权限管理系统 项目介绍 cloud_layui是基于springcloud alibaba+layui整合开发前后端分离权限管理系统,架构思想来源于( RuoYi-Cloud) ...
- SpringBoot2.0.3 + SpringSecurity5.0.6 + vue 前后端分离认证授权
新项目引入安全控制 项目中新近添加了Spring Security安全组件,前期没怎么用过,加之新版本少有参考,踩坑四天,终完成初步解决方案.其实很简单,Spring Security5相比之前版本少 ...
- 【官方推荐】Laravel7 + Vue2.0前后端分离框架通用后台源码
laravel7 + vue + element-ui的后台极速开发框架,采用前后端分离架构,安全性 (JWT 校验.中间件.验证器.路由.异常处理.权限控制) 网址:http://139.155.4 ...
- 【全栈】vue3.0 + golang 尝试前后端分离【博客系统1.0】开发
1. 效果图 背景:想在自己的vps上搭建一个个人博客系统,之前自己用宝塔+WordPress 搭建过一个不过 还是想自己用golang做个真正属于自己的博客系统,于是就有了标题所述.... 2. ...
- 一套仿阿里完整版Spring Boot电商项目,前后端分离+权限管理系统
项目简介 1.项目背景 2. B2B 模式 3. B2C 模式 ==(商城模式)*== 4. C2B 模式 5. C2C 模式 6. O2O 模式 2.商城架构图 2.1.前后端分离 基础版 2.3. ...
- 前后端分离 ajax请求后台重定向
最近在做的一个前后端分离的一个项目,这就涉及到登录验证的问题.我用的是token加上filter. 1,前端请求登录的时候,用用户名和加上当前时间生成一个token,存入redis,然后返回给前端. ...
- 从0搭建一个Springboot+vue前后端分离项目(六)后台编写配置类与接口
新建一个包,里面放入一些常用的配置类 引入mybatis-plus包与插件 引入包 前往官网查看 https://baomidou.com/pages/226c21/#%E5%88%9D%E5%A7% ...
最新文章
- 混淆工具Dotfuscator基本使用
- 神策数据杨宁:财富管理转型趋势下的精细化运营
- 【线上分享】基于人眼主观视觉的画质评价与提升
- 内存恶鬼drawRect
- 第5章 Python 数字图像处理(DIP) - 图像复原与重建3 - 爱尔兰(伽马)噪声
- SUSE Linux系统安全配置十条
- 链表的头结点和尾节点的用处
- linux修改maven端口号,Linux(centos7)安装maven3.5
- WAS中间件服务器简介
- 质量管理五大工具、七大手法知识点总结
- c语言版输出2-200以内的素数
- Python编写时钟表turtle
- 如何在手机上压缩图片?两种免费方法了解一下
- java 保龄球游戏开发_2019-11-08-基于TDD实现的java版本的保龄球规则(实体类)
- DHTMLET-Cascading Style Sheet 2.0 中文手册
- 好数对的数目(C++)
- 成功体验Katalon框架测试安卓APK(一)
- java mongodb开发_Java 操作 MongoDB
- 哪种耳机适合跑步用、跑步运动耳机推荐
- 修改源码刷步数、年会摇一摇数据
热门文章
- 2018 中国大陆网速排名世界 141 位;Linux 4.18 内核发布
- Https证书制作方法
- python实现文本查重系统_NLP之gensim库python实现文本相似度/匹配/查重
- 旅行照片剪辑--呼伦贝尔篇--9.18
- 超赞!60种数据可视化图表使用场景及制作工具整理大全 !
- 对小部分bats的守护进程
- Cordova 打包签名 Android release app
- AGBT:将代数图和双向transformer用于分子性质预测 | 彩色加权代数图 | transformer的encoder | AG-FP | BT-FP
- 细聊 JavaScript 的事件执行机制
- Workspace associated with branch ‘XXX‘ has been restored