vue中两种认证方式常用的认证有两种：一种是路由拦截，一种是动态路由。路由拦截通过vue-router的beforeEach方法拦截每一次路由访问，判断拦截到的信息中是否有鉴权要求或权限校验，从而实现鉴权。如果权限不足，访问路径存在但会被阻塞。动态路由在登录后根据用户信息和权限动态添加正确的权限路由。如果权限不够，则访问路径不存在。与路由拦截相比，实现起来相对简单。只需要在登录的时候保存用户权限信息，然后在写路由的时候把权限信息添加到需要认证的路由中，然后在beforeEach拦截中判断是否可以访问处理，并且，连Refresh通过f5进入页面，只要保存用户信息和权限信息，即可实现认证。而且动态路由实现起来比较繁琐，可能需要后端配合，但是看起来还是在安全性上更高级。毕竟就算你知道有一定的权限路由，但我根本不渲染，你永远也走不过去。进去。动态路由需要记录登录后的用户权限菜单列表。这个列表可以由后端给出，也可以由前端自己汇总。如果前端自己总结的话，需要根据不同权限的用户生成不同的路由列表，登录后进行按需渲染。而且这种动态路由加载判断的条件和实现逻辑会比较复杂。需要考虑f5刷新后的动态路由重载，因为此时不会再经历登录操作，所以动态路由加载不会放在登录函数的回调中，但必须在之后渲染login，所以也放在router的beforeEach方法中，只需要将判断条件改为用户权限信息已经存在但是动态路由加载渲染即可。具体实现请参考示例。示例-路由拦截//文件目录|--webapp|----src|------api|------pages|------routers|---------modules|--------index.js|------utils|------App.vue|------main.js|-----package.json|----vue.config.js//webapp/src/routers/modules/user.js//路由可以根据模块来区分，我这里只是细化了一下，你也可以把所有的路由放在一个文件夹里，但是可能看起来会多一点constuserRouter=[{path:'/user/router1',//这样写可以实现按需加载，打包细化，webpackChunkName是打包组件生成的文件名前缀:()=>import(/*webpackChunkName:"router1"*/'@/pages/user/router1.vue'),meta:{//这里放一些自定义信息，permission是权限信息，会在beforeEach后面判断，需要Amin进入//有时候我们想把一个路由下的所有组件都打包在同一个异步chunk中。只需使用命名块，一种特殊的注释语法来提供块名称（需要Webpack>2.4）。//https://router.vuejs.org/zh/guide/advanced/lazy-loading.htmltitle:'router1',permission:'admin'}},{path:'/user/router2',组件:()=>import(/*webpackChunkName:"router2"*/'@/pages/user/router2.vue'),meta:{title:'router2'}}]exportdefaultuserRouter;//webapp/src/router/index.js//这里总结了所有详细的模块路由importVuefrom'vue';importRouterfrom'vue-router';importuserRouterfrom'@/routers/modules/user.js';//vue使用vue-router这个插件Vue.use(Router);constrouter=newRouter({routes:[{path:'/',redirect:'/home'},...userRouter,{path:'*',redirect:'/404'}]});exportdefaultrouter;//webapp/src/main.js//一般router的beforeEach会放在main.js中，在整个vue实例化时加载。importVuefrom'vue';importrouterfrom'@/routers/index.js';//这里可以截取vue-router的beforeEach，也可以放在别处，我比较喜欢把这个router.beforeEach((to,from,next)=>{document.title=to.meta.title||'';//这里先获取用户信息，我比较懒用sessionStorage保存//里面包含用户权限，各种用户信息等.constuser=JSON.parse(sessionStorage.getItem('ms_user'));//这里必须加上to.path!=='login'的判断，否则会陷入死循环，//因为逻辑第一次进入第二次，判断用户信息不存在，即!user为真，因为使用了next('/login')而不是next()，//会进入路由跳转再次，并且next()方法没有参数，直接进入页面，不会再次进入路由拦截，但是如果有参数，就会，因为跳转，//所以再次进入路由，再次判断，ent再er路由，再判断，重复死循环//所以一定要加上to.path!=='login'判断if(!user&&to.path!=='/login'){next('/登录'）;}elseif(to.meta.permission){user.permission===to.元许可？next():message.alert('没有权限');}else{下一个（）；}});newVue({router,render:h=>h(App)}).$mount('#app');想交流的可以私信或wx：zilian_taoyaoyao
