谷粒学院项目整合SpringSecurity进行用户认证和用户授权

红太狼 2022-12-22 08:45 297阅读 0赞

## 注意：虽然写的有点多，但别慌，我还有视频版讲解：[https://www.bilibili.com/video/BV13K4y1f7DX][https_www.bilibili.com_video_BV13K4y1f7DX] ##

## 1、往数据库中添加表 ##

![在这里插入图片描述][20201118174929410.png_pic_center]  
从上到下依次是权限表、角色表、角色和权限关系表、用户表、用户和角色关系表

## 2、整合后端 ##

新建spring\_security模块、service\_acl模块

![在这里插入图片描述][20201118175209553.png_pic_center]  
还需要在在common\_utils模块中添加MD5.java和ResponseUtils.java：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center]

## 3、整合前端 ##

1、跟着老师的要求整合就可以，另外25-guli-admin-copy(这是我自己的项目名称，就是弹幕上说让你们备份的内容)是前端整合springsecurity之前的项目，当时是担心整合失败，所以保留下来了，并且没有整合springsecurity之前的项目更加简单一点，所以有必要保留下来；

2、注意要把element-ui替换了，因为老师修改了element-ui的源码

3、接下来我会说一下流程，如果你想把这套spring security搬到其他项目中，可以根据我的流程看一下缺啥少啥，然后自己添加就可以了

## 4、前后端打通流程 ##

启动项目：

前端：输入npm run dev启动25-guli-admin项目(注意：这是我的前端项目名称，你找到自己的启动，反正就是后台的前端项目)

后端：只需要启动三个模块用来测试就可以了，如下：

![在这里插入图片描述][20201118180626492.png_pic_center]  
其中EduApplication是业务模块，GateWayApplication是网关模块，ACLApplication是访问控制列表模块

然后Webstrom就会操作浏览器访问`http://localhost:9528`，但是你看到的是`http://localhost:9528/login`，我们直接来看前端项目中src下面的permission.js：

router.beforeEach(async(to, from, next) => { ……})

以上操作会在路由真正改变之前执行，所以路由能否改变取决于它的执行结果，我们看`const hasToken = getToken()`，该代码可以获取token，我们追踪一下它，可以看到它来自于`import { getToken } from '@/utils/auth'`，我们进入auth.js下面，可以看到：

const TokenKey = 'Admin-Token'
    export function getToken() { 
      return Cookies.get(TokenKey)
    }

这就是从cookie中取出token，现在我们没有登录，所以肯定没有token，因此返回值肯定是undefined，至于token是如何放入cookie的，我们等会再说，现在我们回到src下面的permission.js，既然hasToken是undefined，那么`if (hasToken)`这个判断肯定通不过，所以直接看else，里面第一行代码是：`if (whiteList.indexOf(to.path) !== -1)`，这个代码用来验证请求地址是否在白名单内，我们找到上面的whiteList白名单，它就是`const whiteList = ['/login', '/auth-redirect']`，由于我们现在的请求地址是`/`(注意：http://localhost:9528地址后会默认带上/，所以这就相当于访问http://localhost:9528/，这是我说请求地址是/的原因)，所以不在白名单中，那就会执行else操作，那我们看else，里面的第一行代码是`next('/login')`，这就会让地址栏的地址变成`http://localhost:9528/login`，这就是为什么我们访问`http://localhost:9528`却去访问了`http://localhost:9528/login`的原因，现在我们的步伐已经到了登录页：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 1]  
那我们可以来到src》view》login》index.vue中看一下，这个vue页面就是登录页，如果我们不输入用户名或者密码，以及输入不合法的用户名和密码都是是无法登录的，并且还会弹出错误提示，这是在input输入框和form表单中添加了检查操作，如果我们输入合法的用户名或者密码，然后点击登录，就会执行`handleLogin()`方法，代码如下：

<el-form-item>
    	<el-button :loading="loading" type="primary" style="width:100%;" @click="handleLogin">
    	    登录
    	  </el-button>
    </el-form-item>

那我们来看`handleLogin()`方法，我们挑选重要的代码来看：

this.$store.dispatch('Login', this.loginForm).then(() => { 
      // 请求成功之后停止加载状态，然后进入首页
      this.loading = false
      this.$router.push('/')
    })

通过this.$store.dispatch看出这是执行了store中的异步操作方法，我们来到src》store》modules》user.js中，搜索`Login`，然后就可以在actions中找到`Login()`，然后我们来看里面重要的操作：

login(username, userInfo.password).then(response => { 
      const data = response.data
      setToken(data.token)
      commit('SET_TOKEN', data.token)
      resolve()
    })

可以看到执行了login()方法，我们追溯一下login()方法的来源：

import {  login, logout, getInfo } from '@/api/login'

那我们去看src》api》login.js，在里面搜索login，就可以看到：

export function login(username, password) { 
      return request({ 
        url: '/admin/acl/login',
        method: 'post',
        data: { 
          username,
          password
        }
      })
    }

这代表会向后端的`/admin/acl/login`发送请求，我们来到api\_gateway网关模块中，可以看到：

![在这里插入图片描述][20201119132034978.png_pic_center]  
所以我们的请求会被转发到service\_acl模块，由于service\_acl模块引入了spring\_security模块，另外在service\_acl模块的启动类上配置了包扫描注解：

@ComponentScan("com.atguigu")

所以spring\_security模块中的配置文件都会被扫描到，因此在请求执行之前会先经过spring\_security模块中的过滤器，我们先去到spring\_security模块中，找到config》TokenWebSecurityConfig.java，然后看里面的`configure`方法中的`addFilter(new TokenLoginFilter(authenticationManager(), tokenManager, redisTemplate))`，这个TokenLoginFilter.java中就可以处理我们的登录请求，里面有代码如下：

this.setRequiresAuthenticationRequestMatcher(new AntPathRequestMatcher("/admin/acl/login", "POST"));

所以前端请求的地址`"/admin/acl/login"`来自于这个地方，然后我们看该java文件中attemptAuthentication()方法的代码，其中：

User user = new ObjectMapper().readValue(req.getInputStream(), User.class);

可以取出user信息，里面放置的是username和password，既然看到了User，那就需要说一下entity中的User.java了，它和service\_acl中entity中的User.java相似，只是部分字段不同，另外service\_acl对应的是数据库中的acl\_user表，而spring\_security中的User.java是spring security要用的，所以用途也是不同的，然后我们接着看spring\_security模块中的TokenLoginFilter.java中的attemptAuthentication()方法：

return authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(user.getUsername(), user.getPassword(), new ArrayList<>()));

执行以上代码的时候会去service\_acl模块下面的UserDetailsServiceImpl.java中获取用户信息和用户权限列表，那我们来到UserDetailsServiceImpl.java中看一下，可以看到该类实现了UserDetailsService接口，其中UserDetailsService是spring security的接口，该类中只有`loadUserByUsername()`方法，可以看到里面取出了用户信息，之后把用户信息放入了spring\_security模块中的User对象中，另外取出了用户权限列表，然后把用户信息和权限列表都放在了SecurityUser对象中返回，我们来看SecurityUser.java类，那我们需要来到spring\_security模块中，里面放了currentUserInfo和permissionValueList，分别是用户信息和权限列表，当service\_acl模块下面的UserDetailsServiceImpl类中attemptAuthentication()方法执行完毕之后，就会到spring\_security模块中的successfulAuthentication()方法执行，可以看到：

SecurityUser user = (SecurityUser) auth.getPrincipal();

其中SecurityUser中存储着用户信息和权限列表，然后在看：

String token = tokenManager.createToken(user.getCurrentUserInfo().getUsername());

这是使用用户名称生成了token，在看：

redisTemplate.opsForValue().set(user.getCurrentUserInfo().getUsername(), user.getPermissionValueList());

将用户名称当做key，在将权限列表当做value存入redis中，在看：

ResponseUtil.out(res, Result.ok().data("token", token));

这会把token返回到前端，我们回到前端src》store》modules》user.js中继续看Login()方法中的代码：

login(username, userInfo.password).then(response => { 
      const data = response.data
      setToken(data.token)
      commit('SET_TOKEN', data.token)
      resolve()
    })

可以看到`setToken(data.token)`其中data.token就是刚才返回到前端的那个token，我们搜索setToken，可以看到：

import {  getToken, setToken, removeToken } from '@/utils/auth'

继续追溯setToken，来到src》utils》auth.js，然后找到setToken()方法：

const TokenKey = 'Admin-Token'
    export function setToken(token) { 
      return Cookies.set(TokenKey, token)
    }

所以setToken()方法可以把token放在了cookie中，回到src》store》modules》user.js中继续看Login()方法继续看`commit('SET_TOKEN', data.token)`，可以找到同文件中mutations里面的SET\_TOKEN()方法：

SET_TOKEN: (state, token) => { 
      state.token = token
    }

所以这就是把token放在了state中，这样一做所有的地方都可以通过store访问token了，那么我们以后发送请求都会带上token，我们来看src》utils》request.js中的请求拦截器：

service.interceptors.request.use(
      config => { 
        // 让每个请求携带自定义token，gatters.token相等于一个计算属性，它可以从子模块中取出token值
        if (store.getters.token) { 
          // getToken()方法可以从cookie中取出token值，这个值和上面的store.getters.token是同一个值，毕竟在user.js中放的的时候就放的是同一个值
          config.headers['token'] = getToken()
        }
        return config
      }

可以看到store仓库中存储的token和cookie都用上了，以后我们每次发送请求都会在请求头中带上token，看到这里src》api》login.js下面的login()方法就完美收工了，也代表着src》store》modules》user.js中的Login()异步方法也完美收工了，还记着我们当时为什么来看Login方法吗，因为src》view》login》index.vue中`handleLogin()`方法中用到了Login异步方法，我们回到`handleLogin()`方法看里面的代码：

this.$store.dispatch('Login', this.loginForm).then(() => { 
      // 请求成功之后停止加载状态，然后进入首页
      this.loading = false
      this.$router.push('/')
    })

所以Login方法执行完毕之后就会来访问`/`这个路由，由于在src》router》index.js中配置了静态路由，因此我们访问`/`就会被重定向到`/dashboard`，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 2]

还记得在路由变化之前需要执行src下面的permission.js中的router.beforeEach(async(to, from, next) => \{\})方法吗，现在我们再来看一遍：

const hasToken = getToken()

`import { getToken } from '@/utils/auth'`证明getToken()来自于auth.js中，你可以自己去看一下，该方法就是从cookie中取出token，在上面的操作中我们已经将token放入了cookie，所以说现在hasToken就是token值，然后在看`if (hasToken) {……}`，这次hasToken有值了就会执行if中的代码，在看：

if (to.path === '/login') { ……}

上面已经说了src》view》login》index.vue中`handleLogin()`方法执行完毕之后就会来访问`/`这个路由，然后被重定向到访问`/dashboard`这个路由，所以to.path是`/dashboard`而不是`/login`，因此会走else，我们看else中的代码：

const hasRoles = store.getters.roles && store.getters.roles.length > 0

这行代码是要判断当前用户是否具有角色，我们来看src》store》index.js中的getters：

const store = new Vuex.Store({ 
      modules, // store下面的modules下面的app.js、permission.js、user.js都是index.js中的子模块
      getters,
      ……
    }

追溯它的来源：

import getters from './getters'

找到同级目录下面的`getters.js`，可以看到`roles: state => state.user.roles`，其中state、user分别是store目录下面的index.js中的state和modules中的user子模块，因此`store.getters.roles`等于user.js中state中的roles属性值，然后我们来到src》store》modules》user.js中，可以看到state中确实有一个`roles: []`，我们来到src》permission.js中还看原来的那行代码：

const hasRoles = store.getters.roles && store.getters.roles.length > 0

现在就可以知道store.getters.roles是\[\]，所以hasRoles是false，因此`if (hasRoles)`不会执行，而会执行else中的代码，我们看else中的代码：

const {  roles } = await store.dispatch('GetInfo')

可以看到将会执行异步方法GetInfo()，我们来到src》store》modules》user.js中找到`async GetInfo({ commit, state })`，可以看到里面首先执行的是`getInfo()`方法，我们追溯getInfo()发现`import { login, logout, getInfo } from '@/api/login'`，所以我们来到src》api》login.js中，搜索getInfo：

export function getInfo() { 
      return request({ 
        url: '/admin/acl/index/info',
        method: 'get'
      })
    }

这代表会后端地址`/admin/acl/index/info`发送请求，我们来到后端看spring\_security模块中的config中的TokenWebSecurityConfig类中configure()方法，可以看到另外一个过滤器`addFilter(new TokenAuthenticationFilter(authenticationManager(), tokenManager, redisTemplate)).httpBasic()`，这个是授权过滤器，当service\_acl模块接收`/admin/acl/index/info`请求之前会先经过该过滤器，我们来到filter下面的TokenAuthenticationFilter.java过滤器，可以找到一个doFilterInternal()方法，我给大家打个断点看一下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 3]  
来看比较重要的代码：

authentication = getAuthentication(req);

我们来看同类下面的getAuthentication()方法：

String token = request.getHeader("token");
    if (token != null && !"".equals(token.trim())) { 
        // 获取用户名称
        String userName = tokenManager.getUserFromToken(token);
    
        // 取出权限值列表之后在使用SimpleGrantedAuthority进行封装
        List<String> permissionValueList = (List<String>) redisTemplate.opsForValue().get(userName);
        Collection<GrantedAuthority> authorities = new ArrayList<>();
        for (String permissionValue : permissionValueList) { 
            if (StringUtils.isEmpty(permissionValue)) continue;
            SimpleGrantedAuthority authority = new SimpleGrantedAuthority(permissionValue);
            authorities.add(authority);
        }
    
        // 如果名称不是null，那就把UsernamePasswordAuthenticationToken返回
        if (!StringUtils.isEmpty(userName)) { 
            return new UsernamePasswordAuthenticationToken(userName, token, authorities);
        }
        return null;
    }

里面先从token中取出了username，在通过username取出了redis存储的权限列表，这个权限列表是在TokenLoginFilter.java存入的，在上面我已经解释了，然后把每一个权限包装在SimpleGrantedAuthority类中，然后依次放入`Collection<GrantedAuthority>`集合中，最终通过`return new UsernamePasswordAuthenticationToken(userName, token, authorities);`返回了一个UsernamePasswordAuthenticationToken对象，再次来到doFilterInternal()方法中，在看一行代码是：`SecurityContextHolder.getContext().setAuthentication(authentication);`，估计这个就是授权操作，授权完成之后用户就可以去访问service\_acl模块中的IndexController.java中的info()方法：

@GetMapping("info")
    public Result info(){ 
        //获取当前登录用户的用户名
        String username = SecurityContextHolder.getContext().getAuthentication().getName();
        // 从数据库中查询用户相关信息，其中有name、avatar、roles、permissionValueList
        Map<String, Object> userInfo = indexService.getUserInfo(username);
        return Result.ok().data(userInfo);
    }

上面简单介绍了userInfo中的内容，其中name就是username，avatar是管理账号头像，由于前端页面没写没上传头像功能，所以avatar是我们在数据库中写死的，roles是用户的所有角色，permissionValueList是权限列表，这些都会被封装在userInfo中返回给前端，我们回到前端src》store》modules》user.js中的`GetInfo()`方法中：

getInfo().then(response => { 
    // response会返回name、avatar、roles、permissionValueList
    const data = response.data
    // 验证返回的roles是否是一个非空数组
    if (data.roles && data.roles.length > 0) { 
      // 把用户的所有角色存在state中的roles属性中，直接看mutations中的SET_ROLES()方法
      commit('SET_ROLES', data.roles)
    } else { 
      // 如果没有角色会报错
      reject('getInfo: roles must be a non-null array !')
    }
    
    // 把所有权限值都放在buttonAuthList数组中
    const buttonAuthList = []
    data.permissionValueList.forEach(button => { 
      buttonAuthList.push(button)
    })
    
    // 把用户名称、头像、权限数组都放在state中，这样我们就可以随处调用了，直接看mutations中的SET_NAME、SET_AVATAR、SET_BUTTONS方法
    commit('SET_NAME', data.name)
    commit('SET_AVATAR', data.avatar)
    commit('SET_BUTTONS', buttonAuthList)

注释中说的很清楚了，我就不再赘述，还记得我们为什么来到user.js中找到GetInfo()吗，那是src》permission.js中使用了，就是下面这行代码处用的：

const {  roles } = await store.dispatch('GetInfo')

我们继续往下看：

const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

这就需要去看src》store》modules》permission.js了，至于为什么把generateRoutes()方法写成这种形式，这是因为permission.js中写了[namespaced: true][namespaced_ true]，我们来看generateRoutes方法，看第一行代码：

const asyncRouter = await getMenu()

我们追溯getMenu()，可以看到`import { getMenu } from '@/api/login'`，我们来到src》api》login.js中可以找到：

export function getMenu() { 
      return request({ 
        url: '/admin/acl/index/menu',
        method: 'get'
      })
    }

这代表向`/admin/acl/index/menu`地址发送请求，我们来到后端spring\_security模块中继续看TokenAuthenticationFilter.java，里面可以过滤这个请求，我们打个断点看一下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 4]

接下来在TokenAuthenticationFilter.java中的操作和`/admin/acl/index/info`请求的操作一致，所以不再赘述，直接看service\_acl模块中的IndexController.java中的getMenu()方法，主要看这个代码：

List<JSONObject> permissionList = indexService.getMenu(username);

我们进去getMenu()方法看：

// 根据用户名称获取用户信息
    User user = userService.selectByUsername(username);
    //根据用户id获取用户菜单权限
    List<JSONObject> permissionList = permissionService.selectPermissionByUserId(user.getId());

我们在进入selectPermissionByUserId()方法看：

if (this.isSysAdmin(userId)) { 
        //如果是超级管理员，获取所有菜单
        selectPermissionList = baseMapper.selectList(null);
    } else { 
        // 如果不是超级管理员，只能获得部分权限
        selectPermissionList = baseMapper.selectPermissionByUserId(userId);
    }
    List<Permission> permissionList = PermissionHelper.bulid(selectPermissionList);
    return MemuHelper.bulid(permissionList);

其中isSysAdmin()方法我就不带着看了，里面就是判断当前用户的用户名是不是admin，如果是那就是超级管理员，直接获取所有权限，如果不是那就获取该用户该有的所有权限，selectList()和selectPermissionByUserId()方法比较简单，所以不带着看了，然后看`List<Permission> permissionList = PermissionHelper.bulid(selectPermissionList);`这个里面会对取出的权限列表进行分类，我们点进去看一下，可以看到里面的build()方法先获取所有pid为0的权限信息，之后设置level是1，并且把这些权限信息存在List集合中，其实我们只有一个pid为0，它就是name为全部数据的那个，所以List集合中只有一个值，然后我们带着name为全部数据的Permission对象执行findChildren()递归调用，一级一级的把所有的下级列表放在上级列表的children中，permissionList执行结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 5]  
但是这还不是我们想要的结果，我们最终想要的结果需要和下面的前端路由对应起来，便于我们拼接动态路由：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 6]

然后我们进入`MemuHelper.bulid(permissionList)`中的build方法看一下：

List<JSONObject> meuns = new ArrayList<>();

其中menus存放所有的一级菜单

Permission topNode = treeNodes.get(0);

上面的Permission topNode就是name为全部数据的Permission对象，里面的children中放着所有的一级菜单，我们从中可以取出所有的一级菜单

List<Permission> oneMeunList = topNode.getChildren();

上面的oneMeunList 存放着所有的一级菜单，然后我们逐个遍历一级菜单，就可以获得和最终的动态路由差不多的结构，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 7]  
可能你在思考，children去哪里了？别急，他来了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 8]  
还记得我们前面还有“编辑课程基本信息”那种按钮，它也指向.vue文件，它就是数据库中的三级按钮，在二级菜单的children中，我们可以把这些三级按钮取出来也放在一级父路由的children中，注意我们没有放在二级路由的children中，这也是和我们的之前写静态路由的方式对应着的，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 9]  
需要注意的是component可是赤裸裸的字符串，而我们写静态路由的时候指向的可是.vue文件，这个我们在前端会进行处理，另外我在数据库中添加了redirect和hidden字段，老师是直接把redirect设置成了“noredirect”，这个和前端组件中对应着呢，如下：

![在这里插入图片描述][20201119111159303.png_pic_center]  
另外老师把所有的hidden设置成了false，我是用字段来动态设置hidden的值，其中hidden的类型是tinyint类型和is\_deleted是类似的，另外在数据库中添加了字段，你也需要在service\_acl模块中的entity目录下面的Permission中添加redirect和hidden属性，还需要在mapper目录下面的PermissionMapper.xml中添加上redirect和hidden的配置，最终获得的所有一级父路列表permissionList如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 10]  
还记着我们为什么来访问/admin/acl/index/menu吗，这是因为在前端src》store》modules》permission.js中的generateRoutes方法中的第一行代码：

const asyncRouter = await getMenu()

我们回到上述modules下面的permission.js的generateRoutes()方法中继续往下看代码：

return new Promise(resolve => { 
      // permissionList中放着所有的一级父路由，一级父路由中有children，children中放着二级菜单和三级按钮变化的子路由，二级菜单和三级按钮变化的子路由中都没有children
      const tmp = asyncRouter.data.permissionList
      // 对一级父路由列表进行处理，生成动态路由
      const accessedRoutes = filterAsyncRouter(tmp)
      // 拼接动态路由和静态路由，搜索SET_ROUTES就可以看到上面的方法，它是把动态路由和静态路由拼在一起放在state中的routes里面
      commit('SET_ROUTES', accessedRoutes)
      // 把动态路由返回
      resolve(accessedRoutes)
    })

其中上面代码中filterAsyncRouter()是一个重点，还记着我们在上面说过component只是一个赤裸裸的字符串，我们在前端会把字符串变成指向真正的vue文件，这个filterAsyncRouter()方法就是做的这个事情，其中一级父路由的component是Layout.vue，普通的子路由(二级菜单和三级按钮组成的子路由)指向的是views下面的.vue文件，我们需要使用@views和.vue进行拼接，所以你现在应该知道数据库中的component字段怎么填了吧，以及那些path、name、meta中的title和icon、redirect、hidden怎么填了吧，说白了那些字段的最终目的就是为了拼接我们的动态路由，你可以根据你之前填写的静态路由改写一下数据库中的那些信息就可以了，数据库中的那些信息最终会在这里被拼接成动态路由，和我们之前的静态路由是一致的，不过和acl相关的路由信息按照老师给的静态路由往数据库中填值就可以了，我们回到正题，还记着是谁调用的generateRoutes()方法吗，就是在src》permission.js中调用的，我们来看里面的方法：

const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    // 把创造的动态路由放入到已经有的路由中，这样动态路由和普通路由使用起来就没有区别了
    router.addRoutes(accessRoutes)

经过上面的router.addRoutes(accessRoutes)，最终我们完成了动态路由从数据库中的字符串信息到真正路由的演变过程，以后你使用动态路由就和使用router下面的index.js是一样的，然后继续看：

next({  ...to, replace: true })

还记着我们获取用户信息和动态路由之前访问的是哪个路由吗，它就是src》view》login》index.vue中`handleLogin()`方法中用到了Login异步方法执行完毕后执行的`this.$router.push('/')`，对的就是`/`，不过静态路由会把`/`重定向到`/dashboard`，我们就是因为这个请求才能获取的用户信息和菜单，所以现在我们会访问这个`/dashboard`路由，每一次路由访问之前都会经过src》permission.js中的`beforeEach()`方法，现在我们有了token、roles，方法中的判断我就不说了，最后直接执行`next()`，所以会直接向`/dashboard`发起请求，访问的就是src》dashboard》index.vue，所以我们的页面就变成了：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 11]  
挺神奇的吧，从登录页到首页居然经过了这么多步骤

如果我们访问权限管理下面的请求，我们依然会经过后端spring\_security模块中的TokenAuthenticationFilter过滤器，这是因为spring\_acl模块v中引入了service\_security模块，另外service\_acl模块上面加了`@ComponentScan("com.atguigu")`注解，所以在请求真正执行之前先会经过spring\_security模块中的过滤器，而TokenAuthenticationFilter过滤器中将会把redis中存储的权限列表取出来在加工一下，最终执行`SecurityContextHolder.getContext().setAuthentication(authentication);`，这里面的过程我暂时也不清楚，老师的解释是给用户授权，不过我在下面测试使用用户退出之前的cookie中存储的token信息在用户退出之后在假装有token进行登录，发现没能成功，原因是redis中没有数据了，而从redis中取数据就是为了生成authentication用的，不过深层的含义我还不知道，以后知道了补上吧**TODO** ，经过过滤器之后就可以把请求正常的发送到service\_acl中了，然后把返回值返回给我

如果我们访问其他的管理，例如讲师管理等等是不用经过spring\_security模块的，毕竟那些模块也没有导入spring\_security模块的依赖

你可能会有一些疑问，如果我只有课程管理的菜单，我如果访问讲师管理中的内容，我可以访问成功吗，我想告诉你，不可以，例如我现在只有课程管理权限：

![在这里插入图片描述][20201119142425112.png_pic_center]

但是我想访问：“http://localhost:9528/teacher/list”，很明显这是获取讲师管理列表，在我们的页面上是没有这个按钮的，但是可以直接在地址栏输入“http://localhost:9528/teacher/list”，点击回车键发起请求，我来告诉你这中间经过了什么过程，虽然是直接在地址栏发送的请求，这也属于路由的范畴，只不过这不是通过程序发起的路由变化请求，而是我们浏览器地址栏发起的请求，不过依然需要经过src》permission.js中的beforeEach()方法，我先说明不是通过程序发起的请求无法获取store中的内容，但是依然可以获得cookie中的token，所以hasToken有值、hasRoles为false，但是通过程序发起的请求中hasToken有值并且hasRoles为true，所以就会执行下面的代码：

const { roles} = await store.dispatch('GetInfo')
    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    router.addRoutes(accessRoutes)

第一条语句是获取用户信息，第二条语句是拼接动态路由，第三个就是继续发送我们之前的路由，不过这次就是通过程序发起的了，如果是正常的请求自然可以再次通过src》permission.js发出正常的请求最终获取到数据，而非正常的请求会因为找不到路由对应的.vue文件会出现空白页面，这就实现了鉴权操作

既然这些都说完了，我们说一下退出吧，当我们点击登出：

![在这里插入图片描述][20201119143850113.png_pic_center]

这个时候我们应该去看src》views》layout》components》Navbar.vue：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 12]  
可以看出点击登出的时候执行的是logout()方法，我们来到该方法：

logout() { 
      this.$store.dispatch('LogOut').then(() => { 
        location.reload()
      })
    }

我们追溯LogOut到`src》store》modules》user.js`中搜索LogOut，然后看该方法中内容：

LogOut({  commit, state }) { 
      return new Promise((resolve, reject) => { 
        logout().then(() => { 
          commit('SET_TOKEN', '')// 清空store仓库中存储的token
          commit('SET_ROLES', [])// 清空store仓库中存储的roles
          commit('SET_BUTTONS', []) // 清空store仓库中存储的权限值列表
          removeToken() // 把token从cookie中移除
          resolve()
        }).catch(error => { 
          reject(error)
        })
      })

然后我们看到执行了logout()方法，我们追溯该方法发现`import { login, logout, getInfo } from '@/api/login'`，那我们就取到`src》api》login.js`中搜索logout()方法：

export function logout() { 
      return request({ 
        url: '/admin/acl/index/logout',
        method: 'post'
      })
    }

可以看出这是向`'/admin/acl/index/logout'`发起的请求，这个请求会从api\_gateway模块转发到service\_acl模块，然后被引入到service\_acl模块的spring\_security模块过滤，所以我们直接看spring\_security模块中的`TokenWebSecurityConfig.java`文件，在看里面的config方法，你可以找到一下代码：

.logout().logoutUrl("/admin/acl/index/logout")
    .addLogoutHandler(new TokenLogoutHandler(tokenManager, redisTemplate))

第一行代码表示拦截的请求地址是：`"/admin/acl/index/logout"`，然后退出处理器中有tokenManager和redisTemplate参数，所以退出处理器可以帮助我们删除redis中存储的权限列表，虽然TokenManager.java中没有写删除token的方法，但是你退出之后在使用原来的token去访问项目是无法成功的，虽然你的token是正确的，并且没有过期，但是你访问浏览器还是失败的

既然看完了后端的，我们继续回到前端`src》store》modules》user.js`中的LogOut()方法：

commit('SET_TOKEN', '')// 清空store仓库中存储的token
    commit('SET_ROLES', [])// 清空store仓库中存储的roles
    commit('SET_BUTTONS', []) // 清空store仓库中存储的权限值列表
    removeToken() // 把token从cookie中移除

注释解释的很清楚，所以就不在赘述了，然后回到src》views》layout》components》Navbar.vue中的logout()方法：

logout() { 
      this.$store.dispatch('LogOut').then(() => { 
        location.reload()
      })
    }

里面执行了`location.reload()`用于刷新当前页面，老师给出的解释是：为了重新实例化vue-router对象 避免bug，我也没有搞懂为什么执行该代码之后页面会自动跳到登录页的流程

上面我们提到使用退出之前的token信息填写到控制栏的cookie里面再去访问系统会失败，不信你看，你可以在退出登录之后把自己的控制栏中cookie中的token信息保存下来，然后退出之后重新打开f12把自己保存的信息添加到cookie里面，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 13]  
然后你在浏览器地址栏输入`http://localhost:9528/`，点击回车访问，你会发现结果是：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 14]虽然你的token是正确的，也没有过期，我们来到后端的TokenAuthenticationFilter.java中的getAuthentication()方法中，你可以取出token中存储的username，但是你无法取出redis中存储的权限列表，由于permissionValueList为null，那么for循环遍历的时候就会出现错误，所以最终给你返回错误，这个“失败”文字弹窗来自于common\_utils模块中的Result.java中的error()方法，然后被我们前端utils中的request.js中的的响应拦截器拦截了，所以会弹出错误提示信息，而error来自于前端src》permission.js中的catch()\{\}，这是因为执行`const {roles} = await store.dispatch('GetInfo')`的时候发生了错误(上面我们说过点击回车的访问流程，它不支持使用store中的内容，所以src》permission.js中的hasRoles为null，因此会执行上述代码获取获取用户信息，然后后端获取不到redis存储的权限列表，所以出现错误)，之后被catch捕获到了，我们看catch()\{\}中的代码：

await store.dispatch('FedLogOut')
    next('/login')

我们追溯FedLogOut找到src》store》modules》user.js中，搜索FedLogOut找到：

FedLogOut({ commit}) { 
      return new Promise(resolve => { 
        commit('SET_TOKEN', '') 
        removeToken() // 把token从cookie中移除
      	resolve()
    	})
    }

其中commit(‘SET\_TOKEN’, ‘’)用于清空前端vuex的store仓库中存储的token，由于我们在当前user.js文件中的state中设置了token: getToken()，其中getToken()就是获取cookie中的token，所以我们伪造cookie之后会导致store中的token也会有值，而store中的token关系着utils下面的request.js中放token到header中，你看if (store.getters.token) \{config.headers\[‘token’\] = getToken()\}，其中store.getters.token取出store中的token，而getToken()取出cookie中的token，如果我们不删除store仓库中存储的token，就会影响我们下次发起登录请求，当FedLogOut()执行完毕之后就会执行next(’/login’)，所以我们就看到页面回到了`http://localhost:9528/login`

[https_www.bilibili.com_video_BV13K4y1f7DX]: https://www.bilibili.com/video/BV13K4y1f7DX
[20201118174929410.png_pic_center]: /images/20221120/b2c00409965e4830a0500056e044c8d2.png
[20201118175209553.png_pic_center]: /images/20221120/14195a0c4af44c82a365336978fabf98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/69d6e8986d184d2db793b9b5b5d8ab3f.png
[20201118180626492.png_pic_center]: /images/20221120/176dfdac24de4ecf9b7a893f518b85a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/21572d95427e4b89bb2fdad03f95e4e1.png
[20201119132034978.png_pic_center]: /images/20221120/2c9d54a6ee9f417798f376d6e811b399.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/b67a850c90d440daa234deeb11eca73b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/7be93495bd374602be14237b092f521f.png
[namespaced_ true]: https://blog.csdn.net/qq_42449963/article/details/109755648
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/aa052f7e4a0b404393f487532619a101.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/f07616d0de87413cad22e8184712b740.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/d5a51913e9d34389b3e2ac2ffbe9edc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/623a737d06df43f685bc035327ad37e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/7393d3428f114ea4a16d90b22a553050.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/4e2f91b1013948d6abf2ed9c7b4b314a.png
[20201119111159303.png_pic_center]: /images/20221120/1270c7d4f0944d47ae390d75a07844eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221120/8d00ea953b0649a98e8961ccae38c90e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221120/a2efa0093286410e8452cf426f185eee.png
[20201119142425112.png_pic_center]: /images/20221120/2100c9fa9a914accb0cfb394dcea2232.png
[20201119143850113.png_pic_center]: /images/20221120/7690cb3d5bc64acdaa54650cc83c7e4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221120/32bcfe7eaddd420088dabb9195dc1d70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221120/79e1781f86d24c20a51569053567a4b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221120/485ec696423b4a4ebdf29be0693d0d94.png