导读：好久没写文章了，最近比较忙。一直在考虑用Vue+webpack重写SanJiBootSecurity项目中的页面。前几天，这个计划分阶段完成，后面会跟进SanJiBoot模块的数量不断增加，并进行相应的升级和扩展简介：项目源码已经托管在码云上使用的技术:webpack+Vue+VueRouter+iviewUI实现了哪些功能：基于token的登录时鉴权支持跨域需要修改config/index.js文件constpath=require('path')module.exports={dev:{//路径assetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:{'/api':{target:'http://localhost:8089/api',changeOrigin:true,pathRewrite:{'^/api':''}}}...}}自定义axiossrc/api/http.js文件importrouterfrom'../router'importaxiosfrom'axios'importbusfrom'../bus'//axios配置axios.defaults.timeout=30000;axios.interceptors.request.use(config=>{if(bus.state.token){//判断是否有token，如果有则在每个http头添加一个tokenconfig.headers.Authorization=`${bus.state.token}`;}returnconfig;},err=>{returnPromise.reject(err);});//http响应拦截器axios.interceptors.response.use(response=>{returnresponse;},error=>{if(error.response){switch(error.response.status){case401://return401清除token信息并跳转到登录页面bus.state.token=undefined;router.replace({path:'login',query:{redirect:router.currentRoute.fullPath}})}}returnPromise.reject(error.response.data)//返回接口返回的错误信息});导出默认axios；编写src/router/index.js文件importVuefrom'vue'importRouterfrom'vue-router'importbus在进入页面之前根据VueRouter的权限进行前端验证from'../bus'Vue.use(Router)//baseconstIndex=resolve=>require(['../views/Index'],resolve)constLogin=resolve=>require(['../views/Login'],resolve)const主页=resolve=>require(['../views/demo/Home'],resolve)constForbidden=resolve=>require(['../views/demo/403'],resolve)constNotFound=resolve=>require(['../views/demo/NotFound'],resolve)constIcon=resolve=>require(['../views/demo/Icon'],resolve)constDemo=resolve=>require(['../views/demo/Demo'],resolve)//sysconstUserManager=resolve=>require(['../views/sys/User'],resolve)constRoleManager=resolve=>require(['../views/sys/Role'],resolve)constrouter=newRouter({}routes:[{path:'/login',name:'login',component:Login},{path:'/',name:'index',component:Index,meta:{requireAuth:true,//添加这个field,表示进入该路由需要登录},children:[{path:'//',name:'HomePage',component:Home,meta:{requireAuth:true,//添加此字段表示访问tothisrouteLoginisrequired},},{path:'/demo',name:'demo',component:Demo,meta:{requireAuth:true,//添加此字段表示需要登录才能进入此路由},},{路径:'/icon',名称:'icon',组件:icon,meta:{requireAuth:true,//添加此字段表示进入此路由需要登录},},{path:'/sys/user',name:'UserManagement',component:UserManager,meta:{requireAuth:true,//添加该字段表示需要登录该路由。permissions:'sys-user'}},{path:'/sys/role',name:'rolemanagement',component:RoleManager,meta:{requireAuth:true,//添加这个字段表示需要登录权限进入这条路线：'sys-role'}},{path:'/403',name:'403',component:Forbidden,},{path:'/*',name:'404',component:NotFound,meta:{requireAuth:true,//添加该字段，表示进入该路由需要登录}}]}]});router.beforeEach((to,from,next)=>{if(to.path==="/logout"){bus.state.token=undefined;next({path:'/login'})}else{bus.state.menu_title=to.name;if(to.meta.requireAuth){//判断路由是否需要登录权限//console.log('token:',bus.state.token!=null,bus.state.token,)if(bus.state.token!="undefined"&&bus.state.token){//通过vuex状态获取当前token是否存在if(to.meta.permissions){if(bus.action.hasPermissions(bus,to.meta.permissions)）{下一个（）;}else{bus.state.menu_title='403'next('/403');}}else{下一个（）；}}else{next({path:'/login',query:{redirect:to.fullPath}//使用重定向的路由路径作为参数，登录成功后重定向到该路由})}}else{next();}}})导出默认路由器；后台界面主框material设计风格基于material_admin实现前端界面响应式设计，支持后台界面主框快速切换
