vue-element-admin学习笔记

vue-element-admin学习笔记

该笔记学习自b站大佬Noble_Yang的vue-element-admin 手把手实现前后台分离的安全控制，https://www.bilibili.com/video/BV1Yv411Y7tw?share_source=copy_web

1.说明

1. 关闭eslint校验

   vue.config.js中将lintOnSave设置成false

   module.exports={
   	lintOnSave:false
   }
   

2. 设置前后端分离后，前端访问后端的url

   修改环境变量配置文件中的VUE_APP_BASE_API参数的值

   开发环境下,修改env.development文件
   ！！！但是由于当时莫名其妙报错我没有改

   # base api 后端url
   # VUE_APP_BASE_API = '/dev-api'系统默认
   # VUE_APP_BASE_API = '/http://localhost:8080'
   

3. vuecli4.0报错:sockjs.js?9be2:1605GEThttp://localhosthost/sockjs-node/info

   注释掉

   node_modules\sockjs-client\dist\sockjs.js

   里面的1604行左右

   try {
       //self.xhr.send(payload);
     } catch (e) {
       self.emit('finish', 0, '');
       self._cleanup(false);
     }
   

   ！！！注释掉之后页面需要手动刷新，我也没有碰到这个错误，所以我没有改

4. 显示左上角的logo

   将src/setting.js文件中的sidebarLogo属性设置为true

   /**
      * @type {boolean} true | false
      * @description Whether show the logo in sidebar
      */
     sidebarLogo: true,
   

5. 修改logo的图片和文字

   修改/src/layout/components/Sidebar/Login.vue里面的title和logo属性

   图片应放在public内

   data() {
       return {
         title: '在线系统',
         logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
       }
     }
   

​

2.实现有后端的登录

2.1涉及到的代码说明

2.1.1显示登录页面涉及到的文件

1. src/main.js

   入口js,注册全局组件（Vue,Cookie,Element,store,router等），渲染App组件到页面

2. src/App.vue

   定义全局router-view,以便显示路由组件

3. src/permission.js

   定义路由拦截其，拦截所有路由。拦截过程中，完成是否登录校验、根据用户角色动态挂在路由

4. src/router/index.js

   定义路由表

   export const constantRoutes 基本路由表，所有用户都可以访问的路由表

   export const asyncRoutes 异步路由，只有拥有权限的用户再能显示的路由表

5. src/views/login/index.vue

   定义登录组件

6. src/utils/validate.js

   定义用户名验证函数

7. src/store/modules/user.js

   login行为

8. src/api/user.js

   请求api（login）

9. src/utils/request.js service对象

   基于axios发送web请求

2.1.2实现java后端登录

1. http://localhost:8080/login,http://localhost:8080/info

2. /utils/validate.js

   export function validUsername(str) {
     // const valid_map = ['admin', 'editor']
     // return valid_map.indexOf(str.trim()) >= 0
     return str.trim().length>0
   }
   

3. /views/login/index.vue

   loginForm: {
           username: '10145201',
           password: '123456'
         }
   

4. src/api/user.js

   export function login(data) {
     return request({
       //url: '/vue-element-admin/user/login',
       baseURL:'http://localhost:8080',
       url: '/teacherlogin',
       method: 'post',
       data
     })
   }
   

5. /src/utils/request.js的49-70行注释，因为我们没有这么多状态码

6. 登录成功后，前端会获取一个token值，做为登录标识。但是要进入操作页面，需要有用户的角色信息。这时候前端会发送获取用户信息的请求到后台，获取当前用户的详细信息（包括角色信息）。发送请求的代码在src/permission.js中定义的路由拦截器里面。

// 路由拦截器
router.beforeEach(async(to, from, next) => {
  ......
  if (hasToken) {
    if (to.path === '/login') {
      ...
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      // 获取登录用户的角色，能获取到，表示有角色信息，否则就调用getInfo，获取当前登录用户的角色信息
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        ...
      } else {
        try {
          // get user info
          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          // 派发user/getInfo action，获取当前用户的角色信息
          const { roles } = await store.dispatch('user/getInfo')
         ...
        } catch (error) {
          ...
        }
      }
    }
  } else {
    ...
  }
})