element admin Login

src/main.js 入口js,注册全局组件(vue cookie element store route)等,渲染app组件到页面

登录:

1.src/permission.js:登录时,先验证是否存在token,存在,再验证有什么权限==》跳到后台,不存在==》跳转login登录页

2.src/views/login/index.vue:

2.1规则验证:

登录方法(handleLogin)=》表单验证(this.$refs.loginForm.validate:username:loginRules==》src/utils/validate.js==》return validUsername==》index.vue的validateUsername验证;)

登录方法(handleLogin)=》表单验证(this.$refs.loginForm.validate:password:loginRules==》index.vue的validatePassword验证;)

2.2数据请求验证:

this.$store.dispatch('user/login', this.loginForm) ==》src/store/modules/user.js(接收表单数据)==》src/api/user==》src/utils/request执行axios请求验证,code==20000 为true

 3.改造src/api/user

//发送的数据格式{"username":"zhangsan","password":"123456789"}
//希望后台返回的数据{"code":20000,"data":{"token","admin-token"}}
export function login(data) {
  return request({
    baseURL:'http://localhost:80',
    url: '/auth/login',//'/vue-element-admin/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    baseURL:'http://localhost:80',
    url: '/auth/getInfo',//'/vue-element-admin/user/info',
    method: 'get',
    params: { token }
  })
}

 

posted @ 2022-06-05 16:23  Atom++  阅读(55)  评论(0编辑  收藏  举报