来自:https://www.cnblogs.com/fqh123/p/11094296.html 侵删
login登录方法
login() {
if (!this.username) {
return this.$message.error("请输入用户名");
}
if (!this.password) {
return this.$message.error("请输入密码");
}
if (this.checked) {
localStorage.setItem("username", this.username);
localStorage.setItem("password", this.password);
localStorage.setItem("checked", 1);
} else {
localStorage.removeItem("username");
localStorage.removeItem("password");
localStorage.removeItem("token");
}
let data = {
username: this.username,
password: this.password
};
this.$store
.dispatch("login", data)
.then(() => {
this.$message.success("登录成功");
this.$router.push({ path: "/" });
})
.catch(() => {
console.log(222);
this.$message.error("登陆失败");
// this.loading = false;
});
},
store中
import Vue from "vue"; import Vuex from "vuex"; import { getToken, setToken, removeToken, deepClone } from '@/utils/auth' import { formatDate } from "@/utils/index.js"; import { login, getUserInfo } from "@/api/mine.js"; import { asyncRouterMap, constantRoutes } from '@/router'; Vue.use(Vuex); function hasPermission(menuMap, route) { if (route.meta && route.meta.menu_code) { for (const item of menuMap) { if (item === route.meta.menu_code) { return true } } return false } else { return true } } function filterAsyncRouter(asyncRouterMap, menuMap) { const accessedRouters = asyncRouterMap.filter(route => { if (hasPermission(menuMap, route)) { if (route.children && route.children.length) { route.children = filterAsyncRouter(route.children, menuMap) } return true } return false }) return accessedRouters } const store = new Vuex.Store({ state: { userId: '', mapcontrols: '', //地图的集合 carlist: '', //行车的集合 attachment: '', //附近的集合 menulist: null,//一级导航 lnglat: {},//经纬度 actionUrl: process.env.VUE_APP_BASE_API + "/couplet-admin/file/uploadImage", //上传图片的url tokenObj: { "author-token-key": localStorage.getItem("token") }, //上传的请求头token token: getToken(), routers: constantRoutes, addRouters: [] }, getters: { userId_: state => state.userId, mapcontrols_: state => state.mapcontrols, carlist_: state => state.carlist, attachment_: state => state.attachment, menulist_: state => state.menulist, lnglat_: state => state.lnglat, actionUrl_: state => state.actionUrl, tokenObj_: state => state.tokenObj, token_: state => state.token, routers_: state => state.routers, addRouters_: state => state.addRouters }, mutations: { changemapcontrols: function (state, payload) { state.mapcontrols = payload }, changecarlist: function (state, payload) { state.carlist = payload }, changeMenulist: function (state, payload) { state.menulist = payload }, changecheckAttachment: function (state, payload) { state.attachment = payload }, changelnglat: function (state, payload) { state.lnglat = payload }, changecheckUserId: function (state, payload) { state.userId = payload }, SET_TOKEN: (state, token) => { state.token = token }, SET_ROUTERS: (state, routers) => { state.addRouters = deepClone(routers) state.routers = deepClone(constantRoutes.concat(routers)) } }, actions: { changeformDatas({ commit }, datatime) { return new Promise((resolve, reject) => { let time = formatDate(Number(datatime), "yyyy-MM-dd") resolve(time) }) }, login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { login({ username: username.trim(), password: password }).then(response => { commit('SET_TOKEN', response.body) setToken(response.body) resolve() }).catch(error => { reject(error) }) }) }, getInfo({ dispatch, commit, state }) { return new Promise((resolve, reject) => { getUserInfo().then(response => { // if (!data) { // reject('Verification failed, please Login again.') // } // const menus = data.menuCodes commit('changecheckUserId', response.body.userId) var data = response.body console.log('response', data) // localStorage.setItem('MENU_CODE', menus) const menus = ['/equipmentManagement', '/camera'] dispatch('GenerateRoutes', menus).then(res => { resolve(data) }) }).catch(error => { reject(error) }) }) }, resetToken({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') removeToken() resolve() }) }, GenerateRoutes({ commit }, data) { return new Promise(resolve => { const accessRouters = filterAsyncRouter(asyncRouterMap, data) accessRouters.push({ path: '*', redirect: '/404', hidden: true }) commit('SET_ROUTERS', accessRouters) resolve() }) } } }); export default store
@/utils/auth 中
// import Cookies from 'js-cookie' const TokenKey = 'Authorization' export function getToken() { // return Cookies.get(TokenKey) return localStorage.getItem(TokenKey) } export function setToken(token) { // return Cookies.set(TokenKey, token) return localStorage.setItem(TokenKey, token) } export function removeToken() { // return Cookies.remove(TokenKey) return localStorage.removeItem(TokenKey) } export function deepClone(source) { if (!source && typeof source !== 'object') { throw new Error('error arguments', 'shallowClone') } const targetObj = source.constructor === Array ? [] : {} for (const keys in source) { if (source.hasOwnProperty(keys)) { if (source[keys] && typeof source[keys] === 'object') { targetObj[keys] = source[keys].constructor === Array ? [] : {} targetObj[keys] = deepClone(source[keys]) } else { targetObj[keys] = source[keys] } } } return targetObj }
@/router 中
import Vue from "vue" import Router from "vue-router" import store from "./store"; Vue.use(Router) // console.log("store.getters",store.getters) // console.log("store.getters.menulist_",store.getters.menulist_) const notFound = () => import('@/views/404.vue') //404 //登录相关 const login = () => import('@/views/mine/login.vue') //用户登录 const phoneLogin = () => import('@/views/mine/phoneLogin.vue') //手机登录 const retrievePassword = () => import('@/views/mine/retrievePassword.vue') //找回密码 const modifyPassword = () => import('@/views/mine/modifyPassword.vue') //修改密码 const layout = () => import('@/views/layout/index.vue') //导航 const Index = () => import('@/views/index/index.vue') //首页 //管控中心菜单 const mapControls = () => import('@/views/controlsMenu/mapControls/index.vue') //管控地图 const security = () => import('@/views/controlsMenu/security/index.vue') //安防管理 const fire = () => import('@/views/controlsMenu/fire/index.vue') //消防管理 const car = () => import('@/views/controlsMenu/car/index.vue') //车行管理 const lighting = () => import('@/views/controlsMenu/lighting/index.vue') //智慧照明 const checkAttachment = () => import('@/views/controlsMenu/checkAttachment/index.vue') //附近设备 //设备管理菜单 const equipmentManagement = () => import('@/views/equimentMenu/equipmentManagement/index.vue') //设备管理 const camera = () => import('@/views/equimentMenu/camera/index.vue') //摄像头 const wifismoke = () => import('@/views/equimentMenu/wifismoke/index.vue') //路灯控制 const lightAll = () => import('@/views/equimentMenu/lightAll/index.vue') //智慧灯杆 const postScreen = () => import('@/views/equimentMenu/postScreen/index.vue') //发布屏 //告警管理菜单 const alarmManagement = () => import('@/views/alarmMenu/alarmManagement/index.vue') //告警管理 const alarmManagementHoistory = () => import('@/views/alarmMenu/alarmManagementHoistory/index.vue') //告警管理历史 //事件工单菜单 const eventOrder = () => import('@/views/orderMenu/eventOrder/index.vue') //事件工单 const eventOrderHistory = () => import('@/views/orderMenu/eventOrderHistory/index.vue') //事件工单历史 //巡检菜单 const inspectionTrajectory = () => import('@/views/inspectionMenu/inspectionTrajectory/index.vue') //巡检轨迹 const InspectionTask = () => import('@/views/inspectionMenu/InspectionTask/index.vue') //巡检任务单 const InspectionProject = () => import('@/views/inspectionMenu/InspectionProject/index.vue') //巡检项目组 const InspectionConfig = () => import('@/views/inspectionMenu/InspectionConfig/index.vue') //巡检配置 //预案菜单 const emergencyPlan = () => import('@/views/planMenu/emergencyPlan/index.vue') //应急预案 //系统配置菜单 const user = () => import('@/views/systemMenu/user/index.vue') //用户管理 const org = () => import('@/views/systemMenu/org/index.vue') //组织管理 const area = () => import('@/views/systemMenu/area/index.vue') //区域管理 const role = () => import('@/views/systemMenu/role/index.vue') //角色管理 const menu = () => import('@/views/systemMenu/menu/index.vue') //菜单管理 const log = () => import('@/views/systemMenu/log/index.vue') //操作日志 const partition = () => import('@/views/systemMenu/partition/index.vue') //系统项目管理 const dictionary = () => import('@/views/systemMenu/dictionary/index.vue') //数据字典管理 const appPlat = () => import('@/views/systemMenu/platform/appPlat/index.vue') //平台服务管理 -- 应用平台 const provider = () => import('@/views/systemMenu/platform/provider/index.vue') //平台服务管理 -- 供应商平台 const configManage = () => import('@/views/systemMenu/platform/provider/configManage/index.vue') //平台服务管理 -- 供应商平台--园区配置管理 const apiManage = () => import('@/views/systemMenu/platform/provider/apiManage/index.vue') //平台服务管理 -- 供应商平台--接口管理 //----------------------------- /** * constantRoutes * a base page that does not have permission requirements * all roles can be accessed */ export const constantRoutes = [ { path: "/404", name: '404', component: notFound, hidden: true }, { path: "/login", name: "login", component: login, hidden: true }, { path: "/phoneLogin", name: "phoneLogin", component: phoneLogin, hidden: true }, { path: "/retrievePassword", name: "retrievePassword", component: retrievePassword, hidden: true }, { path: "/modifyPassword", name: "modifyPassword", component: modifyPassword, hidden: true }, { path: '/', component: layout, redirect: '/mapControls', children: [{ path: 'mapControls', name: 'mapControls', component: mapControls, }, ] }, ] //动态加载路由 export const asyncRouterMap = [ { path: '/equipmentManagement', component: layout, meta: { title: 'equipmentManagement', menu_code: '/equipmentManagement' }, redirect: '/equipmentManagement', children: [{ path: '/equipmentManagement', name: 'equipmentManagement', component: equipmentManagement, meta: { title: 'equipmentManagement', menu_code: '/equipmentManagement' }, hidden: true }, { path: '/camera', name: 'camera', component: camera, meta: { title: 'camera', menu_code: '/camera' }, hidden: true } ] }, ] const createRouter = () => new Router({ // mode: 'history', // require service support // mode: 'hash', // require service support scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) const router = createRouter() // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router } export default router
permission.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 NProgress.configure({ showSpinner: false }) // NProgress Configuration 是否有转圈效果 const whiteList = ['/login'] // 没有重定向白名单 router.beforeEach(async (to, from, next) => { // 开始进度条 NProgress.start() // 确定用户是否已登录 const hasToken = getToken() if (hasToken) { if (to.path === '/login') { // 如果已登录,则重定向到主页 next({ path: '/' }) NProgress.done() } else { const hasGetUserInfo = store.getters.userId_; if (hasGetUserInfo) { // console.log("有用户信息"); next(); } else { // console.log("没用户信息"); try { // 获得用户信息 await store.dispatch('getInfo'); router.addRoutes(store.getters.addRouters_)//动态路由 next({ ...to }) } catch (error) { // 删除token,进入登录页面重新登录 await store.dispatch('resetToken'); Message.error(error || 'Has Error'); next(`/login?redirect=${to.path}`); NProgress.done(); } } } } else { /* has no token*/ if (whiteList.indexOf(to.path) !== -1) { // 在免费登录白名单,直接去 next() } else { // 没有访问权限的其他页面被重定向到登录页面。 next(`/login?redirect=${to.path}`) NProgress.done() } } }) router.afterEach(() => { // 完成进度条 NProgress.done() })
基本剩下的雷同文章来源了