第一次摸索着完成vue的权限管理,在此记录下自己搬砖的点点滴滴,希望以后回望的时候,有迹可循,也分享给需要的小伙伴们,参考哦~
思路如下:
1,登录成功后,把后台返回的用户信息,存vueX的state;
2,vueX的actions调接口,返回数据后,赋值给state,然后调用递归,来把返回的数据处理成我们要的格式
3,permission.js中router.beforeEach(),调actions的方法,这里用到了异步执行,所以,需要调用actions的方法后,才能进行下一步,否则,会导致跳转失效
<!-- html的部分-->
<el-button type="primary" @click="l`在这里插入代码片`ogin()">登陆</el-button>
// js的部分
login() {
```````````````````````````````````````````
// 请求接口
api.login(params).then(res => {
if (res.code == 200) {
// 请求到数据后,存入token和id
setToken(res.object.token, res.object.id);
// 存用户名和姓名
setUserName(res.object.name, res.object.username);
`````````````````````````````
// 1,登录成功后,把后台返回的用户信息,存vueX的state;
if (res.object.sysNewMenuVoList.length > 0) {
this.$store.commit("GetUserInfo", res.object.sysNewMenuVoList);
} else {// 否则不让登陆
this.$router.push("/login");
this.$message.error("您还未绑定角色,没有权限哦,请联系管理员");
return;
}
if (params.password == "默认密码") {
let id = getUserId();
this.$prompt("请输入新密码", "您的密码为初始密码,请及时修改", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputPattern: /^[^ ]+$/,
inputErrorMessage: "密码不能为空"
})
.then(({ value }) => {
const newPassword = md5(md5(value));
api
.modifyPassword({ id: id, newPassword: newPassword })
.then(res => {
if (res.code == 200) {
this.$alert("密码修改成功,请重新登录", {
confirmButtonText: "确定",
callback: action => {
removeAccount();
this.logout();
this.password = "";
}
});
} else {
this.$message.error(res.message);
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消输入"
});
});
} else {
this.$router.push("/material");
}
```````````````````````````````````````````````
});
},
2,vueX的actions调接口,返回数据后,赋值给state,然后调用递归,来把返回的数据处理成我们要的格式
// /**
// * 递归过滤异步路由表,返回符合用户角色权限的路由表
// * @param resData
// * @param routerData
// */
export function getRouterList(resData, routerData) {
for (let item of resData) {
// console.log('1111')
a(item, routerData)
}
}
export function a(item, routerData) {
for (let i of item.childrenMenuVoList) {
for (let routerItem of routerData) {
if (routerItem.children &&
routerItem.children.length > 0 &&
routerItem.children[0].meta.percode == i.percode) {
routerItem.children[0].meta.roles = true;
break
}
}
if (i.childrenMenuVoList.length > 0) {
a(i, routerData)
}
}
}
const permission = {
state: {
addRouters: [],
},
getters: {},
mutations: {
GetUserInfo(state, routers) {
state.addRouters = routers
// console.log('存变', state.addRouters)
},
},
actions: {
getAccountInfo({ commit }, router1) {
return new Promise((resolve, reject) => {
api.getAccountInfo().then(res => {
if (res.code == 200) {
commit('GetUserInfo', res.object.sysNewMenuVoList)
getRouterList(res.object.sysNewMenuVoList, router1.options.routes)
resolve()
}
})
})
},
}
}
export default permission;
3,permission.js中router.beforeEach(),调actions的方法,这里用到了异步执行,所以,需要调用actions的方法后,才能进行下一步,否则,会导致跳转失效,permission要先引入到main.js中
// main.js中引入permission
import './permission'
// permission.js中
import Vue from 'vue'
import router from './router';
import store from '@/store/store'
import { getToken } from "@/api/auth.js"
import { getBtnPermission } from "@/api/btnPermission.js"
const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
if (getToken()) {// 判断是否有token
if (to.path == "/login") {
next()
} else {
// console.log('进1')
store.dispatch("getAccountInfo", router).then(() => {
// console.log('进2')
if (to.meta.roles) {
// console.log('进3')
next()
} else {// 当不满足roles的时候,跳404
next('*')
}
})
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
})