技术栈主要有:
vue,vue-router,vuex,axios,vue-cli 3.x(没有
webpack.config.js配置文件,取而代之的是
vue.config.js文件),
fiddle.php...$store.dispatch提交username信息到vuex中的异步action,并将token储存在cookie之中,这样下次打开页面的时候能记住用户的登录状态,不用在登录页面重新登录了....具体实现
创建vue实例的时候将vue-router挂载 , 但这个时候vue-router挂载一些登录或者不用权限的公用的页面
当用户登录后, 获取用role, 将role和路由表每个页面需要的权限作比较...router.js中书写实现路由表:
首先
我们要实现如首页和登录页和一些不用权限的公用页面vue-router如登录页和首页
之后实例化vue的时候只挂载上面不用权限的路由export default...,说明所有可访问路由已生成 ,
如果没权限的页面会自动进入404页面
如果页面没有token时,
如果在页面登入的白名单中,就直接进入if(whiteList.indexOf(to.path) !