vue-admin-template，连接自己后台，二次开发必看

第一步：找到 .env.development文件做如下修改

# just a flag
ENV = 'development'# base api
VUE_APP_BASE_API = 'api'

第二步：找到：vue.config.js,配置跨域，关闭mock，必须做！！！

target换成自己的后端地址

//配置跨域
proxy: { '/api': {target: 'http://118.31.228.113:5730/',ws: true,changeOrigin: true,//允许跨域pathRewrite: {'^/api': ''   //请求的时候使用这个api就可以}}},//这行把mock禁用// before: require('./mock/mock-server.js')

第三步：在这个文件里面，把响应状态码20000改成200（前后端自己约定）

注意：做完这些其实就可以登录了，修改接口在api文件里面，如果要修改登录接口和获取信息接口，

接下来做前端权限管理，路由过滤：

首先在store下面的modules下面新建文件permission.js

复制到里面

import { asyncRoutes, constantRoutes } from '@/router'/*** Use meta.role to determine if the current user has permission* @param roles* @param route*/
function hasPermission(roles, route) {if (route.meta && route.meta.role) {return roles.some(role => route.meta.role.includes(role))} else {return true}
}/*** Filter asynchronous routing tables by recursion* @param routes asyncRoutes* @param roles*/
export function filterAsyncRoutes(routes, roles) {const res = []routes.forEach(route => {const tmp = { ...route }if (hasPermission(roles, tmp)) {if (tmp.children) {tmp.children = filterAsyncRoutes(tmp.children, roles)}res.push(tmp)}})return res;
}const state = {routes: [],addRoutes: []
}const mutations = {SET_ROUTES: (state, routes) => {state.addRoutes = routesstate.routes = constantRoutes.concat(routes)}
}const actions = {generateRoutes({ commit }, roles) {return new Promise(resolve => {let accessedRoutesif (roles.includes('ADMIN')) {//路由是否有admin,有直接全部显示accessedRoutes = asyncRoutes || []} else {//accessedRoutes这个就是当前角色可见的动态路由accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)}commit('SET_ROUTES', accessedRoutes)resolve(accessedRoutes)})}
}export default {namespaced: true,state,mutations,actions
}

然后修改store下面的index.js和getters.js

index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
//这里
import permission from './modules/permission'Vue.use(Vuex)const store = new Vuex.Store({modules: {app,settings,user,
//这里permission},getters
})export default store

getters.js:

const getters = {sidebar: state => state.app.sidebar,device: state => state.app.device,token: state => state.user.token,avatar: state => state.user.avatar,name: state => state.user.name,permission_routes: state=>state.permission.routes,
}
export default getters

然后找到和main平级的 permission.js

修改为如下，就修改了tey{}里面的内容

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'NProgress.configure({ showSpinner: false }) // NProgress Configurationconst whiteList = ['/login'] // no redirect whitelistrouter.beforeEach(async (to, from, next) => {// start progress barNProgress.start()// set page titledocument.title = getPageTitle(to.meta.title)// determine whether the user has logged inconst hasToken = getToken()if (hasToken) {if (to.path === '/login') {// if is logged in, redirect to the home pagenext({ path: '/' })NProgress.done()} else {const hasGetUserInfo = store.getters.nameif (hasGetUserInfo) {next()} else {try {// get user info//从请求中获取到角色const val = await store.dispatch('user/getInfo')console.log(val.roles)// 把当前登录用户信息放到sessionStoragesessionStorage.setItem("roles", JSON.stringify(val) );//这里从permission/generateRoutes拿到路由const accessRoutes = await store.dispatch('permission/generateRoutes', val.roles)next()//刷新路由router.options.routes = store.getters.permission_routes// dynamically add accessible routesrouter.addRoutes(accessRoutes)} catch (error) {// remove token and go to login page to re-loginawait store.dispatch('user/resetToken')Message.error(error || 'Has Error')next(`/login?redirect=${to.path}`)NProgress.done()}}}} else {/* has no token*/if (whiteList.indexOf(to.path) !== -1) {// in the free login whitelist, go directlynext()} else {// other pages that do not have permission to access are redirected to the login page.next(`/login?redirect=${to.path}`)NProgress.done()}}
})router.afterEach(() => {// finish progress barNProgress.done()
})

然后就是添加异步路由了,，router下面的index.js添加asyncRoutes ，和constantRoutes平级

export const asyncRoutes = [{path: 'external-link',component: Layout,children: [{path: 'https://panjiachen.github.io/vue-element-admin-site/#/',//重点：rolemeta: { title: 'External Link', icon: 'link', role: ['admin'] },}]},
]

这就大功告成了，不懂得可以留言，一一回复

vue-admin-template，连接自己后台，二次开发必看相关推荐

ccflow表结构与运行机制（二次开发必看）
驰骋工作流引擎,工作流程管理系统,表结构与运行机制. 前言: 1, ccflow 有自动修复数据表功能, 所以表的字段的变化不需要用户干预由ccflow自动完成. 所以如果你看到sql的错误,在执行一 ...
destoon php os,destoon运行流程二次开发必看
destoon系统采用B/S架构,MVC模式开发.融入了模型化.模板.缓存.AJAX.SEO等前沿技术下面是运行流程,虽然版本有更新但大体上是没有变化太多的//代码首先包含common.inc.ph ...
Vue Admin Template关闭eslint校验，lintOnSave：false设置无效解决办法
目录第一步:lintOnSave:false 第二步:修改package.json中的配置最后一步: 使用Vue Admin Template 二次开发是一件非常愉悦的事情,可是它里面的eslin ...
Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤码云相关操作 2. ...
Vue全家桶-电商后台管理系统项目开发
项目效果展示: 1. 项目概述 1.1 电商项目基本业务概述一般情况下客户使用的业务服务包括:PC端,小程序,移动web,移动app. 管理员使用的业务服务:PC后台管理端: PC后台管理端的功能 ...
weiphp看版本_序言 · weiphp5.0二次开发手册 · 看云
WeiPHP5.0,公众号与小程序结合的最佳开发框架 WeiPHP5.0是一个开源,高效,简洁的移动应用系统,它实现一个后台同时管理和运营多个客户端(公众号,微信小程序,后续将支持支付宝小程序,百度小 ...
前端开发必看 | Vue在前端市场这么火，它到底是什么？
混迹前端市场的大家可能都知道,Vue可以说是一匹黑马,目前github star数已居第一位!前端开发者对Vue使用频率也越来越高. 作为由华人程序员尤雨溪开发的前端构架,它的出身给国人带来了巨大的荣 ...
五分钟学会 Spring Boot Admin：微服务应用监控（小白必看，一看就会教程）
Spring Boot Admin:微服务应用监控 Spring Boot Admin 简介监控信息演示结合注册中心使用功能演示添加登录认证文末福利 Spring Boot Admin 可以 ...
vue admin template开启顶部导航
官网上没有太多的说明废话不多说,直接上代码 1.复制vue element admin必要组件 AppMain.vue覆盖一下 2.修改一些文件 /src/store/index.js /src/s ...

vue-admin-template，连接自己后台，二次开发必看

vue-admin-template，连接自己后台，二次开发必看相关推荐

最新文章

热门文章