ruoyi-vue——登录流程

ruoyi前端登录流程具体见“ruoyi-ui/src/permission.js”文件中,首先我们来了解一下router.beforeEach(全局前置守卫)

一、 router.beforeEach(全局前置守卫)

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,说白了也就是统一控制同一个请求链接在不同条件下跳转到不同路由组件。
router.beforeEach注册一个全局前置守卫,也就是每一个router跳转前都会触发该方法。
router.beforeEach方法参数说明:

  1. “to”: 即将要进入的目标 路由对象;(这个对象中包含name,params,meta等属性)(即请求链接)
  2. “from”: 当前导航正要离开的路由对象;(这个对象中包含name,params,meta等属性) (即发起请求链接的当前路由对象)
  3. “next”: Function: 确保要调用next 方法,否则钩子就不会被 resolved

二、 router.beforeEach实现的登录流程图

ruoyi-vue——登录流程_第1张图片

三、后端相应API方法

  1. 登录方法 ( @PostMapping(“/login”))
com.ruoyi.web.controller.system.SysLoginController#login

    /**
     * 登录方法
     * 
     * @param loginBody 登录信息
     * @return 结果
     */
    @PostMapping("/login")
    public AjaxResult login(@RequestBody LoginBody loginBody)
    {
        AjaxResult ajax = AjaxResult.success();
        // 生成令牌
        String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
                loginBody.getUuid());
        ajax.put(Constants.TOKEN, token);
        return ajax;
    }
  1. 获取用户信息(@GetMapping(“getInfo”))
com.ruoyi.web.controller.system.SysLoginController#getInfo
    /**
     * 获取用户信息
     * 
     * @return 用户信息
     */
    @GetMapping("getInfo")
    public AjaxResult getInfo()
    {
        SysUser user = SecurityUtils.getLoginUser().getUser();
        // 角色集合
        Set<String> roles = permissionService.getRolePermission(user);
        // 权限集合
        Set<String> permissions = permissionService.getMenuPermission(user);
        AjaxResult ajax = AjaxResult.success();
        ajax.put("user", user);
        ajax.put("roles", roles);
        ajax.put("permissions", permissions);
        return ajax;
    }
  1. 获取用户信息(@GetMapping(“getRouters”))
com.ruoyi.web.controller.system.SysLoginController#getRouters
    /**
     * 获取路由信息
     * 
     * @return 路由信息
     */
    @GetMapping("getRouters")
    public AjaxResult getRouters()
    {
        Long userId = SecurityUtils.getUserId();
        List<SysMenu> menus = menuService.selectMenuTreeByUserId(userId);
        return AjaxResult.success(menuService.buildMenus(menus));
    }

你可能感兴趣的:(ruoyi-vue,vue.js,javascript,前端)