来自：https://www.cnblogs.com/fqh123/p/11094296.html 侵删
login登录方法
1login() { 2 if (!this.username) { 3 return this.$message.error("请输入用户名"); 4 } 5 if (!this.password) { 6 return this.$message.error("请输入密码"); 7 } 8 if (this.checked) { 9 localStorage.setItem("username", this.username); 10 localStorage.setItem("password", this.password); 11 localStorage.setItem("checked", 1); 12 } else { 13 localStorage.removeItem("username"); 14 localStorage.removeItem("password"); 15 localStorage.removeItem("token"); 16 } 17 let data = { 18 username: this.username, 19 password: this.password 20 }; 21 22 this.$store 23 .dispatch("login", data) 24 .then(() => { 25 this.$message.success("登录成功"); 26 this.$router.push({ path: "/" }); 27 }) 28 .catch(() => { 29 console.log(222); 30 this.$message.error("登陆失败"); 31 // this.loading = false; 32 }); 33 },
store中
1import Vue from "vue"; 2import Vuex from "vuex"; 3import { getToken, setToken, removeToken, deepClone } from '@/utils/auth' 4import { formatDate } from "@/utils/index.js"; 5import { login, getUserInfo } from "@/api/mine.js"; 6import { asyncRouterMap, constantRoutes } from '@/router'; 7 8Vue.use(Vuex); 9 10function hasPermission(menuMap, route) { 11 if (route.meta && route.meta.menu_code) { 12 for (const item of menuMap) { 13 if (item === route.meta.menu_code) { 14 return true 15 } 16 } 17 return false 18 } else { 19 return true 20 } 21} 22function filterAsyncRouter(asyncRouterMap, menuMap) { 23 const accessedRouters = asyncRouterMap.filter(route => { 24 if (hasPermission(menuMap, route)) { 25 if (route.children && route.children.length) { 26 route.children = filterAsyncRouter(route.children, menuMap) 27 } 28 return true 29 } 30 return false 31 }) 32 return accessedRouters 33} 34 35const store = new Vuex.Store({ 36 state: { 37 userId: '', 38 mapcontrols: '', //地图的集合 39 carlist: '', //行车的集合 40 attachment: '', //附近的集合 41 menulist: null,//一级导航 42 lnglat: {},//经纬度 43 actionUrl: process.env.VUE_APP_BASE_API + "/couplet-admin/file/uploadImage", //上传图片的url 44 tokenObj: { "author-token-key": localStorage.getItem("token") }, //上传的请求头token 45 token: getToken(), 46 routers: constantRoutes, 47 addRouters: [] 48 }, 49 getters: { 50 userId_: state => state.userId, 51 mapcontrols_: state => state.mapcontrols, 52 carlist_: state => state.carlist, 53 attachment_: state => state.attachment, 54 menulist_: state => state.menulist, 55 lnglat_: state => state.lnglat, 56 actionUrl_: state => state.actionUrl, 57 tokenObj_: state => state.tokenObj, 58 token_: state => state.token, 59 routers_: state => state.routers, 60 addRouters_: state => state.addRouters 61 }, 62 mutations: { 63 changemapcontrols: function (state, payload) { 64 state.mapcontrols = payload 65 }, 66 changecarlist: function (state, payload) { 67 state.carlist = payload 68 }, 69 changeMenulist: function (state, payload) { 70 state.menulist = payload 71 }, 72 changecheckAttachment: function (state, payload) { 73 state.attachment = payload 74 }, 75 changelnglat: function (state, payload) { 76 state.lnglat = payload 77 }, 78 changecheckUserId: function (state, payload) { 79 state.userId = payload 80 }, 81 SET_TOKEN: (state, token) => { 82 state.token = token 83 }, 84 SET_ROUTERS: (state, routers) => { 85 state.addRouters = deepClone(routers) 86 state.routers = deepClone(constantRoutes.concat(routers)) 87 } 88 }, 89 actions: { 90 changeformDatas({ commit }, datatime) { 91 return new Promise((resolve, reject) => { 92 let time = formatDate(Number(datatime), "yyyy-MM-dd") 93 resolve(time) 94 }) 95 }, 96 login({ commit }, userInfo) { 97 const { username, password } = userInfo 98 return new Promise((resolve, reject) => { 99 login({ username: username.trim(), password: password }).then(response => { 100 commit('SET_TOKEN', response.body) 101 setToken(response.body) 102 resolve() 103 }).catch(error => { 104 reject(error) 105 }) 106 }) 107 }, 108 getInfo({ dispatch, commit, state }) { 109 return new Promise((resolve, reject) => { 110 getUserInfo().then(response => { 111 // if (!data) { 112 // reject('Verification failed, please Login again.') 113 // } 114 // const menus = data.menuCodes 115 commit('changecheckUserId', response.body.userId) 116 var data = response.body 117 console.log('response', data) 118 // localStorage.setItem('MENU_CODE', menus) 119 const menus = ['/equipmentManagement', '/camera'] 120 dispatch('GenerateRoutes', menus).then(res => { 121 resolve(data) 122 }) 123 }).catch(error => { 124 reject(error) 125 }) 126 }) 127 }, 128 resetToken({ commit }) { 129 return new Promise(resolve => { 130 commit('SET_TOKEN', '') 131 removeToken() 132 resolve() 133 }) 134 }, 135 GenerateRoutes({ commit }, data) { 136 return new Promise(resolve => { 137 const accessRouters = filterAsyncRouter(asyncRouterMap, data) 138 accessRouters.push({ path: '*', redirect: '/404', hidden: true }) 139 commit('SET_ROUTERS', accessRouters) 140 resolve() 141 }) 142 } 143 } 144}); 145export default store 146 147@/utils/auth 中 148 149// import Cookies from 'js-cookie' 150 151const TokenKey = 'Authorization' 152 153export function getToken() { 154 // return Cookies.get(TokenKey) 155 return localStorage.getItem(TokenKey) 156} 157 158export function setToken(token) { 159 // return Cookies.set(TokenKey, token) 160 return localStorage.setItem(TokenKey, token) 161} 162 163export function removeToken() { 164 // return Cookies.remove(TokenKey) 165 return localStorage.removeItem(TokenKey) 166} 167 168export function deepClone(source) { 169 if (!source && typeof source !== 'object') { 170 throw new Error('error arguments', 'shallowClone') 171 } 172 const targetObj = source.constructor === Array ? [] : {} 173 for (const keys in source) { 174 if (source.hasOwnProperty(keys)) { 175 if (source[keys] && typeof source[keys] === 'object') { 176 targetObj[keys] = source[keys].constructor === Array ? [] : {} 177 targetObj[keys] = deepClone(source[keys]) 178 } else { 179 targetObj[keys] = source[keys] 180 } 181 } 182 } 183 return targetObj 184} 185 186@/router 中 187 188import Vue from "vue" 189import Router from "vue-router" 190import store from "./store"; 191 192Vue.use(Router) 193 194// console.log("store.getters",store.getters) 195// console.log("store.getters.menulist_",store.getters.menulist_) 196 197const notFound = () => import('@/views/404.vue') //404 198//登录相关 199const login = () => import('@/views/mine/login.vue') //用户登录 200const phoneLogin = () => import('@/views/mine/phoneLogin.vue') //手机登录 201const retrievePassword = () => import('@/views/mine/retrievePassword.vue') //找回密码 202const modifyPassword = () => import('@/views/mine/modifyPassword.vue') //修改密码 203 204const layout = () => import('@/views/layout/index.vue') //导航 205const Index = () => import('@/views/index/index.vue') //首页 206 207//管控中心菜单 208const mapControls = () => import('@/views/controlsMenu/mapControls/index.vue') //管控地图 209const security = () => import('@/views/controlsMenu/security/index.vue') //安防管理 210const fire = () => import('@/views/controlsMenu/fire/index.vue') //消防管理 211const car = () => import('@/views/controlsMenu/car/index.vue') //车行管理 212const lighting = () => import('@/views/controlsMenu/lighting/index.vue') //智慧照明 213const checkAttachment = () => import('@/views/controlsMenu/checkAttachment/index.vue') //附近设备 214 215//设备管理菜单 216const equipmentManagement = () => import('@/views/equimentMenu/equipmentManagement/index.vue') //设备管理 217const camera = () => import('@/views/equimentMenu/camera/index.vue') //摄像头 218const wifismoke = () => import('@/views/equimentMenu/wifismoke/index.vue') //路灯控制 219const lightAll = () => import('@/views/equimentMenu/lightAll/index.vue') //智慧灯杆 220const postScreen = () => import('@/views/equimentMenu/postScreen/index.vue') //发布屏 221//告警管理菜单 222const alarmManagement = () => import('@/views/alarmMenu/alarmManagement/index.vue') //告警管理 223const alarmManagementHoistory = () => import('@/views/alarmMenu/alarmManagementHoistory/index.vue') //告警管理历史 224 225//事件工单菜单 226const eventOrder = () => import('@/views/orderMenu/eventOrder/index.vue') //事件工单 227const eventOrderHistory = () => import('@/views/orderMenu/eventOrderHistory/index.vue') //事件工单历史 228 229//巡检菜单 230const inspectionTrajectory = () => import('@/views/inspectionMenu/inspectionTrajectory/index.vue') //巡检轨迹 231const InspectionTask = () => import('@/views/inspectionMenu/InspectionTask/index.vue') //巡检任务单 232const InspectionProject = () => import('@/views/inspectionMenu/InspectionProject/index.vue') //巡检项目组 233const InspectionConfig = () => import('@/views/inspectionMenu/InspectionConfig/index.vue') //巡检配置 234 235//预案菜单 236const emergencyPlan = () => import('@/views/planMenu/emergencyPlan/index.vue') //应急预案 237 238//系统配置菜单 239const user = () => import('@/views/systemMenu/user/index.vue') //用户管理 240const org = () => import('@/views/systemMenu/org/index.vue') //组织管理 241const area = () => import('@/views/systemMenu/area/index.vue') //区域管理 242const role = () => import('@/views/systemMenu/role/index.vue') //角色管理 243const menu = () => import('@/views/systemMenu/menu/index.vue') //菜单管理 244const log = () => import('@/views/systemMenu/log/index.vue') //操作日志 245const partition = () => import('@/views/systemMenu/partition/index.vue') //系统项目管理 246const dictionary = () => import('@/views/systemMenu/dictionary/index.vue') //数据字典管理 247const appPlat = () => import('@/views/systemMenu/platform/appPlat/index.vue') //平台服务管理 -- 应用平台 248const provider = () => import('@/views/systemMenu/platform/provider/index.vue') //平台服务管理 -- 供应商平台 249const configManage = () => import('@/views/systemMenu/platform/provider/configManage/index.vue') //平台服务管理 -- 供应商平台--园区配置管理 250const apiManage = () => import('@/views/systemMenu/platform/provider/apiManage/index.vue') //平台服务管理 -- 供应商平台--接口管理 251 252 253//----------------------------- 254/** 255 * constantRoutes 256 * a base page that does not have permission requirements 257 * all roles can be accessed 258 */ 259export const constantRoutes = [ 260 { path: "/404", name: '404', component: notFound, hidden: true }, 261 { path: "/login", name: "login", component: login, hidden: true }, 262 { path: "/phoneLogin", name: "phoneLogin", component: phoneLogin, hidden: true }, 263 { path: "/retrievePassword", name: "retrievePassword", component: retrievePassword, hidden: true }, 264 { path: "/modifyPassword", name: "modifyPassword", component: modifyPassword, hidden: true }, 265 { 266 path: '/', 267 component: layout, 268 redirect: '/mapControls', 269 children: [{ 270 path: 'mapControls', 271 name: 'mapControls', 272 component: mapControls, 273 }, 274 ] 275 }, 276] 277//动态加载路由 278export const asyncRouterMap = [ 279 { 280 path: '/equipmentManagement', 281 component: layout, 282 meta: { title: 'equipmentManagement', menu_code: '/equipmentManagement' }, 283 redirect: '/equipmentManagement', 284 children: [{ 285 path: '/equipmentManagement', 286 name: 'equipmentManagement', 287 component: equipmentManagement, 288 meta: { title: 'equipmentManagement', menu_code: '/equipmentManagement' }, 289 hidden: true 290 }, 291 { 292 path: '/camera', 293 name: 'camera', 294 component: camera, 295 meta: { title: 'camera', menu_code: '/camera' }, 296 hidden: true 297 } 298 ] 299 }, 300] 301 302const createRouter = () => new Router({ 303 // mode: 'history', // require service support 304 // mode: 'hash', // require service support 305 scrollBehavior: () => ({ y: 0 }), 306 routes: constantRoutes 307}) 308 309const router = createRouter() 310 311// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 312export function resetRouter() { 313 const newRouter = createRouter() 314 router.matcher = newRouter.matcher // reset router 315} 316 317export default router
permission.js 中
1import router from './router' 2import store from './store' 3import { Message } from 'element-ui' 4import NProgress from 'nprogress' // progress bar 5import 'nprogress/nprogress.css' // progress bar style 6import { getToken } from '@/utils/auth' // get token from cookie 7 8NProgress.configure({ showSpinner: false }) // NProgress Configuration 是否有转圈效果 9const whiteList = ['/login'] // 没有重定向白名单 10 11router.beforeEach(async (to, from, next) => { 12 // 开始进度条 13 NProgress.start() 14 // 确定用户是否已登录 15 const hasToken = getToken() 16 if (hasToken) { 17 if (to.path === '/login') { 18 // 如果已登录，则重定向到主页 19 next({ path: '/' }) 20 NProgress.done() 21 } else { 22 const hasGetUserInfo = store.getters.userId_; 23 if (hasGetUserInfo) { 24 // console.log("有用户信息"); 25 next(); 26 } else { 27 // console.log("没用户信息"); 28 try { 29 // 获得用户信息 30 await store.dispatch('getInfo'); 31 router.addRoutes(store.getters.addRouters_)//动态路由 32 next({ ...to }) 33 } catch (error) { 34 // 删除token，进入登录页面重新登录 35 await store.dispatch('resetToken'); 36 Message.error(error || 'Has Error'); 37 next(`/login?redirect=${to.path}`); 38 NProgress.done(); 39 } 40 } 41 42 } 43 } else { 44 /* has no token*/ 45 if (whiteList.indexOf(to.path) !== -1) { 46 // 在免费登录白名单，直接去 47 next() 48 } else { 49 // 没有访问权限的其他页面被重定向到登录页面。 50 next(`/login?redirect=${to.path}`) 51 NProgress.done() 52 } 53 } 54}) 55 56router.afterEach(() => { 57 // 完成进度条 58 NProgress.done() 59})
基本剩下的雷同文章来源了