mall4cloud 开源项目源码阅读

dguochuan

已于 2023-11-08 20:53:24 修改

阅读量483

点赞数 2

文章标签：开源

于 2023-11-08 20:52:43 首次发布

本文链接：https://blog.youkuaiyun.com/qq_27172615/article/details/134279767

版权

项目搭建：

前端mall4cloud-platform-master：

项目搭建：

微服务商城商城源码分布式商城-商城系统: ⭐️⭐️⭐️Mall4cloud微服商城系统、SpringCloud微服商城系统、B2C微服商城、BBC微服商城、saas商城、SBC商城、微服商城源码、分销微服商城、H5商城、APP商城、PC商城、微服商城、积分商城、会员商城、秒杀商城、团购商城、商城源码、多店商城、供应链商城、多语言商城、商城系统、多用户商城、springboot3商城 (gitee.com)

根据官方文档

前端mall4cloud-platform-master：

需求：

用户登录成功跳转到用户界面，token过期跳转到登录页面，后端配置用户的权限页面

技术

vuex状态管理：简单的理解就是一个全局的数据存储。

路由：你配置了路径，view就可以转到你想要去的页面。

路由守卫：页面跳转的时候，可以做一个拦截的作用。

基本实现思路：用户登录的时候保存一个token到store里面，跳转到首页，每一次页面跳转的时候路由守卫就检测，是否有token，是否有权限。

开发环境跨域解决

vue.config.js开启代理。

  devServer: {
    proxy:{
        
      '/dycloud-auth':{  //请求的api 例如请求是 http://localhost:8080/dycloud-rbac/role/page
        target:"http://localhost:8000", // 网关地址
        ws:true,
        changeOrigin:true
      },
      '/dycloud-platform':{
        target:"http://localhost:8000",
        ws:true,
        changeOrigin:true
      },
      '/dycloud-rbac':{
        target:"http://localhost:8000",
        ws:true,
        changeOrigin:true
      },

    }
  },

代码实现：

点击登录按钮的时候

    login(verifyResult) {
      console.log(verifyResult.captchaVerification)
      this.loading = true
      this.loginInfo.captcha = verifyResult.captchaVerification
      
       调用store login动作 login里面又请求了登录接口，并且将token保存到store
      this.$store.dispatch('user/login', this.loginInfo)
        .then(() => {
          重定向
          this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
          this.loading = false
        })
        .catch((e) => {
          console.log(e)
          this.loading = false
        })
    },

发出重定向指令的时候会先去路由守卫判断。

    如果存在token
  if (hasToken) {
    console.log("路径")
    console.log(to.path)
    如果当前页面是login 也就是你点击的是登录页
    if (to.path === '/login') {
      // 放行到主页
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // debugger
      // determine whether the user has obtained his permission roles through getInfo
      如果有角色直接放行
      if (hasRoles) {
        next()
      } else {
           
        try {
          // 调用后端接口 获取用户信息 和权限，保存到store里面
          const userInfo = await store.dispatch('user/getUserInfo')
          // 获取权限信息
        
          store.dispatch('user/listPermissions')

          let menuIds = []

          if (!userInfo.isAdmin) {
            // 获取菜单信息
            menuIds = await store.dispatch('user/listMenuIds')
          }

          // 获取当前用户的菜单列表
          const accessRoutes = await store.dispatch('permission/generateRoutes', menuIds)
          // 404页面放入路由
          accessRoutes.push({ path: '*', redirect: '/404', hidden: true })
          // 将后端配置的路由放入路由
          router.addRoutes(accessRoutes)

          放行
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  }

注意点：用户首次登录只设置了token，没有角色。所以此时一定会执行到else里面，去查询角色，菜单权限。

store里面的数据也是响应双向的。

下面是store代码

  login({ commit }, userInfo) {
    const { username, password, captcha } = userInfo
    return new Promise((resolve, reject) => {
      login({ principal: username.trim(), credentials: password, captchaVerification: captcha, sysType: 2 }).then(response => {
        commit('SET_TOKEN', response.accessToken)
        setToken(response.accessToken)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // get permissions
  listPermissions({ commit, state }) {
    return new Promise((resolve, reject) => {
      if (state.isAdmin) {
        commit('SET_ROLES', [''])
        resolve([''])
        return
      }
      menuPermissionsList().then(permissions => {
        console.log(permissions)
        if (!permissions) {
          reject('Verification failed, please Login again.')
        }

        // roles must be a non-empty array
        if (!permissions || permissions.length <= 0) {
          permissions = ['']
        }
        commit('SET_ROLES', permissions)
        resolve(permissions)
      }).catch(error => {
        reject(error)
      })
    })
  },