来宾建设网站,新手做网站视频,wordpress 移动导航菜单,成都网站建设租书网思路 登录#xff1a;当用户填写完账号和密码后向服务端验证是否正确#xff0c;验证通过之后#xff0c;服务端会返回一个token#xff0c;拿到token之后#xff08;我会将这个token存贮到localStore中#xff0c;保证刷新页面后能记住用户登录状态#xff09;#xf…思路 登录当用户填写完账号和密码后向服务端验证是否正确验证通过之后服务端会返回一个token拿到token之后我会将这个token存贮到localStore中保证刷新页面后能记住用户登录状态前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息如用户权限用户名等等信息。权限验证通过token获取用户对应的 role动态根据用户的 role 算出其对应有权限的路由通过 router.addRoutes 动态挂载这些路由。
路由定义 路由分为两种constantRoutes 和 asyncRoutes
constantRoutes : 代表那些不需要动态判断权限的路由如登录页、通用页等。
asyncRoutes : 代表那些需要动态判断权限并通过addRoutes动态添加的页面。
创建router.js import Vue from vue;
import VueRouter from vue-router;
import Layout from /layout;Vue.use(VueRouter);//通用页面不需要守卫可直接访问
export const constRoutes [{path: /login,component: () import(/views/Login.vue),hidden: true //导航菜单忽略该项},{path: /,component: Layout, //应用布局redirect: /home,alwaysShow: true,meta: {title: 客户管理, //导航菜单项标题icon:kehu //导航菜单项图标},children: [{path: /home,component: () import(/views/Home.vue),name: home,meta: {title: 客户列表}}]}
];//权限页面受保护页面要求用户登录并拥有访问权限的角色才能访问
export const asyncRoutes [{path: /system_manage,component: Layout,redirect: /system_set,meta: {title: 系统设置,icon: set},children: [ {path: /system_set,component: () import(/views/system_set.vue),name: system_set,meta: {title: 系统设置,roles: [admin, editor] // 设置该路由进入的权限支持多个权限叠加}},{path: /system_organiza,component: () import(/views/system_origaniza.vue),name: system_origaniza,meta: {title: 组织结构,roles: [admin]},children:[//三级路由嵌套还要手动在二级目录的根文件下添加一个 router-view /{path:/custom_link,name:custom_link,component:() import(/views/custom_link.vue),meta:{title:客户联系人}},{path:/tracking,name:tracking,component:() import(/views/tracking.vue),meta:{title:跟踪记录}}]},{path: /system_data,component: () import(/views/system_data.vue),name: system_data,meta: {title: 数据字典,roles: [admin]}}]}
];const router new VueRouter({mode: history,base: process.env.BASE_URL,routes: constRoutes
});export default router;复制代码
登录 创建登录页 views/Login.vue
templatediv classcontainerh2用户登录/h2input typetext v-modelusername /button clicklogin登录/button/div
/templatescript
export default {data() {return {username: };},methods: {login() {/*this.$store.dispatch(user/login, { username: this.username }).then(() {this.$router.push({// 接受路由参数然后跳转path: this.$route.query.redirect || /});}).catch(error {alert(error);});*///调api获取token}}
};
/script复制代码
用户登陆状态维护 vuex根模块实现./store/index.js
import Vue from vue;
import Vuex from vuex;
import user from ./modules/user;
import permission from ./modules/permission;Vue.use(Vuex);export default new Vuex.Store({state: {},mutations: {},actions: {},modules: { user, permission },getters: {roles: state {return state.user.roles;}}
});
复制代码
user模块-存储token 和 roles ./store/modules/user.js
const state {token: localStorage.getItem(token),roles: []
};const mutations {SET_TOKEN: (state, token) {state.token token;},SET_ROLES: (state, roles) {state.roles roles;}
};const actions {login({ commit }, userinfo) {const { username } userinfo;return new Promise((resolve, reject) {setTimeout(() {if (username admin || username jerry) {commit(SET_TOKEN, username);localStorage.setItem(token, username);resolve();} else {reject(用户名、密码错误);}}, 1000);});},getInfo({ commit, state }) {return new Promise(resolve {setTimeout(() {const roles state.token admin ? [admin] : [editor];commit(SET_ROLES, roles);resolve(roles);}, 1000);});}
};export default {namespaced: true,state,mutations,actions
};复制代码
路由守卫 创建./src/permission.js
import router from ./router;
import store from ./store;const whiteList [/login]; //无需令牌白名单router.beforeEach(async (to, from, next) {//to and from are Route Object,next() must be called to resolve the hook// 获取令牌判断用户是否登录const hasToken localStorage.getItem(token);if (hasToken) {//已登录if (to.path /login) {//若以登录没有必要显示登录页重定向回首页next({ path: / });} else {// 去其他路由const hasRoles store.state.user.roles store.state.user.roles.length 0;if (hasRoles) {// 若用户角色已付加则说明权限以判定动态路由已添加next();} else {try {// 请求获取用户信息const roles await store.dispatch(user/getInfo);console.log(roles);// 根据当前用户角色动态生成路由const accessRoutes await store.dispatch(permission/generateRoutes,roles);console.log(accessRoutes);// 添加这些至路由器router.addRoutes(accessRoutes);// 继续路由切换确保addRoutes完成next({ ...to });} catch (error) {// 出错需要重置令牌令牌过期网络错误等原因//await store.dispatch(user/resetToken)next(/login?redirect${to.path});alert(error || 未知错误);}}}} else {//未登录if (whiteList.indexOf(to.path) ! -1) {// 白名单中的路由路过next();} else {// 重定向至登录页next(/login?redirect${to.path});}}
});复制代码
添加动态路由 根据用户角色过滤出可访问路由并动态添加到router 创建permission模块store/modules/permission.js
import { constRoutes, asyncRoutes } from /router;const state {routes: [], //完整路由表addRoutes: [] //用户可访问路由表
};const mutations {SET_ROUTES: (state, routes) {state.addRoutes routes;state.routes constRoutes.concat(routes);}
};const actions {// 路由生成在得到用户角色后第一时间调用generateRoutes({ commit }, roles) {return new Promise(resolve {// 根据角色做过滤处理const accessedRoutes filterAsyncRoutes(asyncRoutes, roles);commit(SET_ROUTES, accessedRoutes);resolve(accessedRoutes);});}
};/*** 递归过滤AsyncRoutes路由表* routes 带过滤的路由表首次传入的就是AsyncRoutes* 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;
}/*** 根据路由meta.role确定是否当前用户拥有访问权限* roles 用户拥有的角色* route 待判定路由*/export function hasPermission(roles, route) {if (route.meta route.meta.roles) {// 若用户拥有的角色中有被包含在待判定的路由角色表中则拥有访问权return roles.some(role route.meta.roles.includes(role));} else {// 没有设置roles则无需判定即可访问return true;}
}export default {namespaced: true,state,mutations,actions
};复制代码
异步获取路由表 用户登录后向后端请求可访问的路由表从而动态生成可访问页面操作和原来是相同的这里多了一步将后端返回路由表中组件名称和本地的组件映射步骤
//前端的映射表map就是之前的asyncRoutes
//服务端返回的map类似于
const serviceMap [{path:/login,component:login,hidden:true}
]
//遍历serviceMap,将component替换为map[component],动态生成asyncRoutes
function mapComponent(serviceMap){serviceMap.forEach(route {route.component map[route.component];if(route.children){route.children.map(child mapComponent(child))}})
}
mapComponent(serviceMap)
复制代码
按钮权限
封装一个指令v-permission从而实现按钮级别权限控制创建src/directtive/permission.js 自定义指令参考 cn.vuejs.org/v2/guide/cu… import store from /store;
const permission {inserted(el, binding) {// 获取指令的值按钮要求的角色数组const { value: pRoles } binding;// 获取用户角色const roles store.getters store.getters.roles;if (pRoles pRoles instanceof Array pRoles.length 0) {const hasPermission roles.some(role {return pRoles.includes(role);});// 如果没有权限删除当前domif (!hasPermission) {el.parentNode el.parentNode.removeChild(el);}} else {throw new Error(需要指定按钮要求角色数组,如v-permission[admin,editor]);}}
};
export default permission;复制代码
注册指令 main.js
import vPermission from ./directive/permission;
Vue.directive(permission, vPermission);
复制代码
测试
button v-permission[admin, editor]admin editor/button
button v-permission[admin]admin/button
复制代码
该指令只能删除挂在指令的元素对于那些额外生成的和指令无关的元素无能为力比如挂载在tab上只能删除标签无法删除对应面板。 可以使用全局权限判断函数使用v-if实现
templateel-tab-pane v-ifcheckPermission([admin])/el-tab-pane
/template
script
export default{methods:{checkPermission(permissionRoles){return roles.some(role {return permissionRoles.include(role);});}}
}
/script
