vue-element-admin登录和动态加载路由

这是参考了官网文档和网上一些文章之后自己对于登录这一块的理解

登录流程是在客户端发送用户名密码到服务端，服务端验证成功后返回token存储用户权限，前端用cookie存储在本地，在路由跳转（router.beforeEach）中判断是否存在token。
权限控制是在router.beforeEach中判断token中的权限和要去往（to）页面的路由信息（router meta）中配置的权限是否匹配。

页面
两个输入框，一个按钮。
把绑定数据，对用户输入的内容进行验证

src -> views ->login -> index.vue
按钮点击事件handleLogin()。对表单进行验证，验证通过，则将表单的内容传到store中的user/login，然后路由跳转至’/’

 handleLogin() {this.$refs.loginForm.validate(valid => {if (valid) {this.loading = true// 请求store中的'user/login'方法，把表单的内容传过去this.$store.dispatch('user/login', this.loginForm).then(() => {this.$router.push({ path: this.redirect || '/', query: this.otherQuery })this.loading = false}).catch(() => {this.loading = false})} else {console.log('error submit!!')return false}})},

src ->store -> modules -> user.js
前面提到的user/login就是在这个文件里面。
获取login index.vue传过来的用户名密码。SET_TOKEN方法将token存储在cookie中

// 用户登录login({ commit }, userInfo) {const { username, password } = userInforeturn new Promise((resolve, reject) => {login({ username: username.trim(), password: password }).then(response => {const { data } = response// 设置token，作为用户已登录的前端标识，存在cookie中commit('SET_TOKEN', data.token)setToken(data.token)resolve()}).catch(error => {reject(error)})})},

src ->store -> modules -> user.js
获取用户信息。
这个方法会以上面保存的token为参数去请求用户的权限

// 获取用户信息getInfo({ commit, state }) {return new Promise((resolve, reject) => {//请求获取权限getInfo(state.token).then(response => {const { data } = responseif (!data) {reject('验证失败，请重新登录！')}const { roles, name, avatar, introduction } = data// 角色roles必须是非空数组if (!roles || roles.length <= 0) {reject('getInfo: roles must be a non-null array!')}commit('SET_ROLES', roles)commit('SET_NAME', name)commit('SET_AVATAR', avatar)commit('SET_INTRODUCTION', introduction)resolve(data)}).catch(error => {reject(error)})})},

分配权限
src -> router -> index.js路由表文件
路由表根据权限分为两类
constantRoutes 没有权限的限制，像登录界面、404、401等都在这里
asyncRoutes 异步路由，有权限的限制，管理界面都在这里
代码里通过在meta里面添加roles赋予权限
src -> permission.js文件里面
添加逻辑：获取用户信息，根据获取到的权限生成可访问的路由映射，然后通过addRouter方法动态添加路由

try {// 获取用户信息，角色必须是对象数组such as: ['admin'] or ,['developer','editor']// await 等待异步完成，只能在async函数中使用const { roles } = await store.dispatch('user/getInfo')// 基于角色生成可访问的路由映射const accessRoutes = await store.dispatch('permission/generateRoutes', roles)// 动态添加可访问路由表router.addRoutes(accessRoutes)// hack方法，确保addRoutes已完成// set the replace: true,所以导航不会留下历史记录next({ ...to, replace: true })} catch (error) {// 删除token并转到登录页重新登录await store.dispatch('user/resetToken')Message.error(error || 'Has Error')next(`/login?redirect=${to.path}`)NProgress.done()}}

src -> store -> permission.js是对路由映射进行判断，加载符合权限的路由列表

vue-element-admin登录和动态加载路由相关推荐

vue系统权限(动态加载路由方式)
目录 1.注册vue-router 2.声明默认路由和权限路由 3.用vuex实现全局登录.退出登录等方法 4.用vuex模块单独写权限路由的判断 5.监听路由跳转实现动态加载权限菜单需要用到动 ...
vue 项目如何实现动态加载路由？
一般来说,vue项目实现动态路由的方式大体可分为两种: 前端把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 后台接口提供当前用户对应权限的路由表,前端通过调接口拿到后处理(后 ...
vue高德、谷歌地图动态加载
vue高德.谷歌地图动态加载前言引入地图资源页面使用完整map.js 前言因为我们这个项目,做的是国际化项目,考虑的是,在国内使用高德地图,在国外使用谷歌地图,所以在这里做了个动态引入地图, ...
vue动态加载路由的实现
动态加载路由的实现 vue后台管理之动态加载路由 vue路由动态加载
reactjs通过lazy函数配合import函数动态加载路由组件
路由组件的lazyLoad //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>i ...
nodejs动态加载路由
Nodejs动态加载路由,Nodejs遍历目录,Nodejs路由工具工具来源: Nodejs需要手动加载路由文件,如果一个个添加,项目逐渐扩大,比较麻烦. 尤其在项目route目录下,增加模块文件夹 ...
Vue环境下el-image图片动态加载失败问题
<div v-for="(item,index) in list" :key="index"><el-image :src="ite ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
Vue + Spring Boot 项目实战（十五）：动态加载后台菜单
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.后端实现 1.表设计 2.pojo 3.菜单查询接口(树结构查询) 二.前端实现 1.后台页面设计 2.数据处理 3.添 ...

vue-element-admin登录和动态加载路由

这是参考了官网文档和网上一些文章之后自己对于登录这一块的理解

vue-element-admin登录和动态加载路由相关推荐

最新文章

热门文章