怎么给网站做优化,永久免费网站服务器,个人年终总结ppt模板下载,做网站怎么保证商品是正品本文主要介绍了基于vue实现网站前台的权限管理(前后端分离实践)#xff0c;小编觉得挺不错的#xff0c;现在分享给大家#xff0c;也给大家做个参考。一起跟随小编过来看看吧#xff0c;希望能帮助到大家。Javascript做为当下的热门语言#xff0c;用途很广泛#xff0c…本文主要介绍了基于vue实现网站前台的权限管理(前后端分离实践)小编觉得挺不错的现在分享给大家也给大家做个参考。一起跟随小编过来看看吧希望能帮助到大家。Javascript做为当下的热门语言用途很广泛从前端到后端处处可见其存在该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习。Javascript框架鳞次栉比但基本原理大致相同因此选用国内人开发的vue.js进行一个初步的尝试。学习vue.js也一周多的时间了说起vue的主要用法无外乎Declarative Rendering、Component System、Client-side Routing、Vue-resource、Axios以及视项目大小而决定是否使用的Vuex学习vue事小主要转变思维面向前后端分离的组件式web开发才是真正想去实践的。正好我的个人网站CodeSheep最近要开发后台管理因此正好用vue这一套来实现了一下。说到后台管理绕不开的问题就是权限的管理。既然想实践前后端分离这种思想因此后台管理的所有web前端的东西应该独立由前端完成这其中就包括很重要的由前端来根据权限进行相关东西的控制。我们想要做到的是不同的权限对应着不同的路由同时页面侧边栏也应该根据不同的权限来异步生成对应的菜单讲白了就是后台管理时不同权限的用户其看到的界面菜单是不一样的因此有了这里实现登录和权限验证的一套流程。具体实现1、点击“登录”按钮触发登录事件this.$store.dispatch(LoginByEmail, this.loginForm).then(() {this.$router.push({ path: / }); //登录成功之后重定向到首页}).catch(err {this.$message.error(err); //登录失败提示错误});其中异步触发的actions LoginByEmail的处理内容如下LoginByEmail ({ commit }, userInfo) {const email userInfo.email.trim()return new Promise((resolve, reject) {loginByEmail(email, userInfo.password).then(response {const data response.datasetToken(response.data.token)commit(SET_TOKEN, data.token)resolve()}).catch(error {reject(error)})})}很容易看出想做的是将从服务器端拿到的token(唯一标示用户身份)放到浏览器本地Cookie中去2、全局钩子router.beforeEach中拦截路由这一步是核心具体处理流程示意如下路由拦截处理流程具体代码如下router.beforeEach((to, from, next) {if (getToken()) { // 判断是否取到tokenif (to.path /login) {next({ path: / })} else {if (store.getters.roles.length 0) { // 判断当前用户是否已获取完user_info信息store.dispatch(GetInfo).then(res { // 获取user_infoconst roles res.data.rolestore.dispatch(GenerateRoutes, { roles }).then(() { // 生成可访问的路由表router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表next({ ...to }) // 放行路由})}).catch(() {store.dispatch(FedLogOut).then(() {next({ path: /login })})})} else {next() // 放行该路由}}} else {if (whiteList.indexOf(to.path) ! -1) { // 在免登录白名单里的路径继续让其访问next()} else { // 其他不在白名单里的路径全部让其重定向到登录页面next(/login)alert(not in white list, now go to the login page)}}})流程图中几个重要步骤解释一下判断前端是否取到了token令牌getToken()操作很简单主要是从Cookie中获取看token是不是已经拿到了export function getToken () {return Cookies.get(TokenKey)}vuex异步操作store.dispatch(GetInfo)获取用户信息GetInfo ({ commit, state }) {return new Promise((resolve, reject) {getInfo(state.token).then(response {const data response.dataconsole.log(data)commit(SET_ROLES, data.role)commit(SET_NAME, data.name)resolve(response)}).catch(error {reject(error)})})}操作也很简单用一个get的restful api从服务器获取用户的角色和名字vuex异步操作store.dispatch(GenerateRoutes, { roles })根据不同的roles来生成不同的前台路由GenerateRoutes ({ commit }, data) {return new Promise(resolve {const { roles } datalet accessedRoutersif (roles.indexOf(admin) 0) {accessedRouters asyncRouter} else {accessedRouters filterAsyncRouter(asyncRouter, roles)}commit(SET_ROUTERS, accessedRouters)resolve()})}从代码中可以看出我这是只区分了管理员角色admin和其他普通用户(即非Aadmin两种权限)该系列的实践后续还将尝试更多将会一一撰帖成文我也是个初学者路漫漫而求索之。。。相关推荐
