登录权限 _token_甘肃龙网

获取用户信息
【登录权限】用户登录成功之后，我们会在全局钩子.中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了
//router.beforeEachif (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息store.dispatch('GetInfo').then(res => { // 拉取user_infoconst roles = res.data.role;next();//resolve 钩子})
就如前面所说的，我只在本地存储了一个用户的token，并没有存储别的用户信息（如用户权限，用户名，用户头像等）。有些人会问为什么不把一些其它的用户信息也存一下？主要出于如下的考虑：
假设我把用户权限和用户名也存在了本地，但我这时候用另一台电脑登录修改了自己的用户名，之后再用这台存有之前用户信息的电脑登录，它默认会去读取本地中的名字，并不会去拉去新的用户信息。
所以现在的策略是：页面会先从中查看是否存有 token，没有，就走一遍上一部分的流程重新登录，如果有token,就会把这个 token 返给后端去拉取，保证用户信息是最新的。
当然如果是做了单点登录得功能的话，用户信息存储在本地也是可以的。当你一台电脑登录时，另一台会被提下线，所以总会重新登录获取最新的内容。
而且从代码层面我建议还是把 login和两件事分开比较好，在这个后端全面微服务的年代，后端同学也想写优雅的代码~
权限
先说一说我权限控制的主体思路，前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role，动态根据用户的 role 算出其对应有权限的路由，再通过.动态挂载路由。但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。
我司现在就是前端来控制页面级的权限，不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许按钮级别的权限控制)，后端则会验证每一个涉及请求的操作，验证其是否有该操作的权限，每一个后台的请求不管是 get 还是 post 都会让前端在请求里面携带用户的 token，后端会根据该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的操作。
.js
首先我们实现.js路由表，这里就拿前端控制路由来举例(后端存储的也差不多，稍微改造一下就好了)
// router.jsimport Vue from 'vue';import Router from 'vue-router';import Login from '../views/login/';const dashboard = resolve => require(['../views/dashboard/index'], resolve);//使用了vue-routerd的[Lazy Loading Routes](https://router.vuejs.org/en/advanced/lazy-loading.html)//所有权限通用路由表 //如首页和登录页和一些不用权限的公用页面export const constantRouterMap = [{ path: '/login', component: Login },{path: '/',component: Layout,redirect: '/dashboard',name: '首页',children: [{ path: 'dashboard', component: dashboard }]},]//实例化vue的时候只挂载constantRouterexport default new Router({routes: constantRouterMap});//异步挂载的路由//动态需要根据权限加载的路由表 export const asyncRouterMap = [{path: '/permission',component: Layout,name: '权限测试',meta: { role: ['admin','super_editor'] }, //页面需要的权限children: [{ path: 'index',component: Permission,name: '权限测试页',meta: { role: ['admin','super_editor'] }//页面需要的权限}]},{ path: '*', redirect: '/404', hidden: true }];
这里我们根据 vue-官方推荐的方法通过meta标签来标示改页面能访问的权限有哪些。如meta: { role: [‘admin’,‘’] }表示该页面只有admin和超级编辑才能有资格进入。