做网站的公司市场,做网站需要什么基础,八爪鱼网络网站建设,手机浏览器网址导航在前端开发的过程中#xff0c;我们需要做前端的权限管理#xff0c;我们需要根据后端提供的信息来控制权限#xff0c;这时候就需要根据用户的操作来进行权限控制了。逻辑稍微有一点绕#xff0c;多理解就好了。
用户路由权限管理 大致的实现原理#xff1a; 一般将路由…在前端开发的过程中我们需要做前端的权限管理我们需要根据后端提供的信息来控制权限这时候就需要根据用户的操作来进行权限控制了。逻辑稍微有一点绕多理解就好了。
用户路由权限管理 大致的实现原理 一般将路由分为2种一种是静态路由就是所有的账号都可以访问的路由比如登录比如主页等还有一种是动态路由就是我们需要做权限判断的路由。实现逻辑是当我们登录完成后获取到token用token去接口请求获取权限路由信息在将路由信息存储到vuex中然后在路由前置守卫里判断去筛选那我们在vuex中存储的权限信息去匹配我们拆分的动态路由然后将整合的路由通过router.addroute将动态路由添加到前端路由里面这样就实现了前端路由权限管控。
1新建组件 我们建3个租价一个主页组件一个登录组件还有一个404页面其中登录组件是我们的静态组件代表着所有用户都有权限访问 2拆分动态路由 在路由配置文件里新建一个文件在里面放我们的动态路由。 在组件中把我们的动态组件放进去主页组件404组件 后面我会讲为什么也要把404组件放在动态组件里面去。
export default [{ path: /, //主页组件name: home,component: () import(/views/HomeView.vue),},{path: *, //404组件name: notfound,component: () import(/views/NotFound.vue),},
];3,创建静态组件 静态组件就是每个账号都有的权限正常在router文件夹下的index里写即可。 4.通过vuex来存储后端返回的权限信息 如何下载vuex我就不过多的说了在vuex的state里建一个role来存储数据然后在actions里请求权限接口将接口返回的权限数据存放在role里代码如下
import { createStore } from vuexexport default createStore({state: {role:},getters: {},mutations: {setrole(state,data){state.role data}},actions: {async getrole({commit}){const role [/,*] //这一步是请求接口接口返回一个权限数组这里我用一个变量代替commit(setrole,role) //将权限数组通过mutations修改state里的role数据}},modules: {}
})5.路由里使用路由前置导航将vuex里的数据添加入动态路由里面 import { createRouter, createWebHashHistory, RouteRecordRaw } from vue-router
import Login from ../views/LoginIndex.vue
import asyncrouter from ./trends //1.导入动态路由
import store from /store //2.导入vuex配置
const routes: ArrayRouteRecordRaw [{path: /login,name: login,component: Login},
]const router createRouter({history: createWebHashHistory(),routes
})router.beforeEach(async(to,from,next){//这里写简单的登录判断逻辑我就不细写了if(1){ //3.判断token存在await store.dispatch(getrole) //4。调用vuex的方法在vuex里请求接口获取权限列表if(to.path/login){//5.有token的情况下如果走登录路由给重定向到/路由next(/)}else{ //6.如果他不走登录我们就判断他是不是走其他不存在的路由if(to.path null){ //7.这里通过to.path是否为空来确定他是不是走的不存在的路由let fasyncrouter.filter(itemitem.path.includes(store.state.role)) //9。判断走的是不存在的路由这里直接调取vuex的role和我们定义的动态路由做筛选//把在动态路由中符合我们 [/,*] 的给筛选出来for(let i0;if.length;i){ //10,通过循环给动态路由给添加进去router.addRoute(f[i])}next({...to,replace:true}) //11.这里是为了预防我跳转路由在添加路由之前就让他一直重复跳知道正确的进去到我们天啊及的动态路由}else{next()}}}else{if(to.path/login){next()}else{next(/login)}}
})export default router代码里关键的地方都有注释应该能看懂
这里我解释下以为vuex和router.addroute都有一个特性就是刷新会丢失所以我们要把他放在路由前置守卫里他丢失不怕我们在每次跳转路由前都重新请求一遍在把他给获取下来。
第二就是为什么要把404也放到动态路由里面这里是因为我们在上面的逻辑中当访问一个不存在的路由的时候我们就通过动态路由方法来添加路由。如果我们把404放在一静态路由里面的话就会出现一个问题当我们访问一个不存在的路由的时候就被404路由给捕获了就不会走我们的动态添加路由了。
稍微有一点绕多看下理解就好了。
