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,
userId: state => state.user.userId,
cmpname: state => state.user.cmpname,
menus: state => state.user.menus
}
export default getters
modules/user.js
import { login,getInfo } from '@/api/user'
import { resetRouter,setRouterMenus } from '@/router'
const state = {
token: getToken(),
name: '',
avatar: '',
userId: 0,
menus:JSON.parse(localStorage.getItem('menus')),
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_USERID: (state, userId) => {
state.userId = userId
},
SET_MENUS: (state, menus) => {
state.menus = menus
},
}
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.token)
commit('SET_NAME', data.username)
//路由route
commit('SET_MENUS', data.route)
localStorage.setItem('menus',JSON.stringify(data.route))
setToken(data.token)
setRouterMenus(state.menus);
resetRouter(data.level); //账号权限
resolve(response)
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息监测登录状态
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
reject('Verification failed, please Login again.')
}
const { user, opList } = data
console.log("getInfo:",response)
console.log("state.menus:",state.menus)
commit('SET_NAME', user.username)
commit('SET_USERID', user.id)
commit('SET_MENUS', data.route)
localStorage.setItem('menus',JSON.stringify(data.route))
resetRouter(user.level);
setRouterMenus(state.menus);
resolve(data)
}).catch(error => {
reject(error)
})
})
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
router/index.js ,路由
import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'
import { menu } from '@/utils/menu'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
//首页跟登录页路由,避免路由获取不及时页面出现空白
export const constantRoutes = [{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/layoutmenu',
component: () => import('@/views/common/layoutmenu'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: {
title: '首页',
icon: 'dashboard'
}
}
]
}
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({
y: 0
}),
routes: constantRoutes
})
const router = createRouter()
export function resetRouter(level) {
setRouterData(level);
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export function setRouterData(level) {
console.log("setRouterData level:" + level);
}
export function setRouterMenus(menus) {
let menuslist = menu(store.getters.menus);
console.log("setRouterMenus menus:");
console.log(menuslist); //后台获取的路由列表
for(var i=0; i<menuslist.length; i++){
constantRoutes.push(menuslist[i])
}
constantRoutes.push({ path: '*',redirect: '/404',hidden: true }); //404页面最后推入
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
premission.js
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 Configuration
const whiteList = ['/login'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
console.log("hasToken:" + getToken())
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
next()
} else {
try {
// get user info
await store.dispatch('user/getInfo')
next()
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
// next(`/layoutMenu`)
// this.$router.push({ path: '/layoutMenu',query: { id: 1 }});
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} 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 bar
NProgress.done()
})
接收到的数据格式
menuList =[{
hidden: 0,
icon: "example",
id: null,
name: "Login",
ossMenuID: "3",
pageUrl: "@/layout",
parentMenuID: "0",
path: "/login",
redirect: "/login/login",
title: "登录",
children: [{
children: null,
hidden: 0,
icon: "table",
id: null,
name: "login",
ossMenuID: "3001",
pageUrl: "/login/login",
parentMenuID: "3",
path: "login",
redirect: null,
title: "登录信息",
}]
}]
utils/menu.js 文件,对接收的路由数据进行处理,使其符合需要的路由格式
import Layout from '@/layout'
import router from '@/router/index'
export function menu(menuList) {
let routeList =[];
for (var i=0; i < menuList.length; i++) {
var hidden = menuList[i].hidden == "1" ? true : false;
var data = {
path:menuList[i].path,
// component: () => import(menuList[i].component),
component:Layout,
name: menuList[i].name,
meta: {
title: menuList[i].title,
icon: menuList[i].icon
},
children:[],
hidden: hidden,
}
if(menuList[i].redirect!=null){
data = {
path:menuList[i].path,
// component: () => import(menuList[i].component),
component:Layout,
hidden: hidden,
redirect: menuList[i].redirect,
name: menuList[i].name,
meta: {
title: menuList[i].title,
icon: menuList[i].icon
},
children:[]
}
}
if(menuList[i].children!=null){
for(var j=0; j<menuList[i].children.length; j++){
let componentName = menuList[i].children[j].pageUrl;
var childrenData = {
path: menuList[i].children[j].path,
name: menuList[i].children[j].name,
component: () => import(`@/views${componentName}`),
meta: {
title: menuList[i].children[j].title,
icon: menuList[i].children[j].icon
}
}
data.children.push(childrenData);
}
}
routeList.push(data);
}
console.log("routeList===========",routeList)
return routeList;
}