后台管理及登录拦截

后台管理及登录拦截

    • 权限管理
    • 登录拦截(全局前置守卫beforeEach和Axios拦截器)

权限管理

为什么要进行权限管理,之所有使用权限管理是因为我们需要给不同的用户显示不同的页面;后台程序的功能可能有100个,超级用户(root)可以全部访问,部门管理者用户可以访问一部分,普通人员可以访问一部分

权限管理分三个模块:权限,角色,用户

权限的作用:配置路由,用于用户访问不同的路由页面,实际来说,权限模块中应该把所有的功能路由都配置出来

角色的作用:可以根据角色来划分不同的权限,比如建立一个超级管理员角色,它应该具备所有的权限功能,建立一个科目负责人角色,他应该具备当前科目下的所有功能,建立一个阶段负责人角色, 他应该具备当前阶段的功能。

用户的作用:我们的系统可以新建不同的用户,比如,张三,李四,王五;给张三分配超级管理员角色,张三就可以访问所有的路由页面功能,给李四分配部门管理角色,李四就具备部分他所在部门的路由功能…

登录拦截(全局前置守卫beforeEach和Axios拦截器)

为什么要登录拦截?
比如用户操作一个商城系统要下订单,如果用户没有登录,则无法下单;那么就意味着需要用户登陆后才能访问的页面可能不止一个;在vue中实现多个页面的访问需要用到vue-router路由;我们可以使用它的导航守卫对需要登录后才能访问的页面这种情况进行判断;
做法是使用全局前置守卫beforeEach判断,在里面判断用户是否登录过,如果登录过则next(),如果没有登录则next({name:‘login’})跳转到登录页面;核心是判断用户是否登陆过;我们在localStorage中存储了一个token,用它来判断用户是否登录,该token的获取是在用户登录成功后接口返回的,需要把token存储到localStorage中,用于后续的判断。登录拦截的实现环节中,除了登录页面,其他的页面请求访问都需要在请求的header中携带token信息;所以可以在axios的请求拦截器里面设置header信息;如果token过期或token无效则返回的结果在axios的响应拦截器中获取,并跳转到登录页

你可能感兴趣的:(javascript,jquery,es6,vue.js,node.js)