2020-05-28 vue-admin-ui总结

使用vue-element开发后台管理系统，简单记录一下，element-admin的文档写的已经很仔细了，一定要好好阅读文档，使用的是admin-template这个基础模板，已经可以满足开发需求，主要是权限控制那部分，也是页面级权限控制，前端写的页面权限表，所以就和elementadmin框架思想实现思路一致了。仔细阅读该框架，代码真心优美流畅，学到很多新姿势技巧，不愧是vue的top1后台管理框架，多多向大神学习。

cd 路径 checkout permission-control分支

整体思路是登录后token保存到cookie，然后拿token获取用户对应的权限维护到vuex里，再动态筛选用户可以加载的权限页面，addRoutes挂载动态路由，左侧的siderbar也是根据vuex内容动态管理的导航栏。在login页面只做获取token操作，并没有顺带再去请求useinfo，相关操作都是在beforeEach拦截器里进行判断的(es6 await写法)
hasPermission这个方法应该默认返回false
plop-templates 创建空模板，npm run new
重点学习了directives的用法，vue用来做按钮级的权限控制方便，强大

vue.config.js

这里主要修改proxy的配置项，来进行代理

  devServer: {
    port: port,
    open: true,
    proxy:{
      [process.env.VUE_APP_BASE_API]:{
        target: 'http://域名/', // 后台接口域名
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    overlay: {
      warnings: false,
      errors: true
    },
    // before: require('./mock/mock-server.js')
  },
.env.production

# just a flag
ENV = 'production'

# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = ''

这里要注意，修改完之后，最好，重新启动一次项目

正常启动之后，因为关闭了mock，是无法直接登录，进去的，所以我们先掉登录的接口
找到src/api/user.js改成自己的接口地址

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

接着找到utils/request.js

这里判断了，token存在的话，将其直接添加到请求头中，当然这里如果在做加密更好

if (store.getters.token) {
    // let each request carry token
    // ['X-Token'] is a custom headers key
    // please modify it according to the actual situation
    config.headers['X-Token'] = getToken()
}
request.js中还要将判断的状态码改成真实后端返回的成功状态码，一般都是200
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

最后找到store/modules/user.js

这里是登录的actions，可以看到登录请求回来的是token，然后讲token提交到了SET_TOKEN，后端返回的token如果在data下，则不需要修改，要是数据结构有变化，再进行相应的修改

  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
以上配置都没有问题，那么登录接口就基本没问题了，不过此时还进不去主页。

这里请求完登录之后，再跳转首页的时候，请求了info接口，因此，还需要一个用户信息的接口，这里只需要讲api/user.js中的user/info接口改成自己的便可，注意前后端字段要对上，如此，便能进入首页。
3.修改页面设置项
找到src/views/settings.js

module.exports = {
  title: 'Vue Element Admin', //网站标题
  showSettings: true,//是否展示页面设置
  tagsView: true,//是否展示标签页
  fixedHeader: false,//是否固定头部
  sidebarLogo: false,//是否在左侧导航展示logo
  supportPinyinSearch: true,
  errorLog: 'production'
}

最后编辑于：2022.05.06 17:16:17