权限管理（Vue）_vue权限管理

最新推荐文章于 2024-06-01 15:46:07 发布

2301_82243491

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量332

点赞数 4

分类专栏：程序员文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_82243491/article/details/138418803

版权

程序员专栏收录该内容

180 篇文章 0 订阅

订阅专栏

VUE权限管理

思路：在login.vue中登录成功时，后端会返回token和该用户对应的权限，前端根据权限数据，展示对应的菜单。点击菜单，才能查看相关的界面。
但是在login.vue获得的权限数据要在home.vue中使用，所以要把请求来的权限数据保存到vuex中
login方法和权限方法

export const login = data => {
  return request({
    url: '/login',
    method: 'POST',
    data
  })
}

// 获取用户权限
export const getRoles = data => {
  return request({
    url: '/roles',
    method: 'POST',
    data
  })
}

login方法调用

 login(this.form).then(res => {
        // console.log(res, 'login=>res')
        // 将用户身份存入vuex 普通用户身份: student 管理员用户身份: admin
        this.$store.commit('setRole', res.data.role)
        this.$store.commit('setUsername', res.data.username)
        this.$store.commit('setPhoto', res.data.photo)
        sessionStorage.setItem('token', res.data.token)

        getRoles(res.data.role).then(ret => {
          // console.log(ret.data, 'getRoles=>ret.data')
          // 将对应身份下的路由存储到vuex
          this.$store.commit('setRightList', ret.data)
          this.loading = false
          this.$message.success('登陆成功')

          // 根据用户所具备的权限 动态添加路由规则
          initDynamicRoutes()
          this.$router.push('/')
        })
      })

vuex
注意这里为什么要把数据保存到sessionStorage？
因为这样当在home.vue刷新时，页面的权限数据不会丢失。不然直接保存数据页面刷新重新获取的时候是没有login的登录请求的，所以请求不到数据。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    role: sessionStorage.getItem('role'),
    rightList: JSON.parse(sessionStorage.getItem('rightList') || '[]'),
    username: sessionStorage.getItem('username'),
    photo: sessionStorage.getItem('photo')
  },
  mutations: {
    setRole (state, data) {
      state.role = data
      sessionStorage.setItem('role', data)
    },
    setRightList (state, data) {
      state.rightList = data
      sessionStorage.setItem('rightList', JSON.stringify(data))
    },
    setUsername (state, data) {
      state.username = data
      sessionStorage.setItem('username', data)
    },
    setPhoto (state, data) {
      state.photo = data
      sessionStorage.setItem('photo', data)
    }
  },
  actions: {},
  getters: {}
})

在home.vue使用权限数据是通过mapState结合computed使用
mapState作用就是把权限数据映射到home.vue中

import { mapState } from 'vuex'

 computed: {
    ...mapState(['username']), // 用户名
    ...mapState(['photo']) // 用户头像
  },

退出登录逻辑
清除sessionStorage和Vuex的数据即可
这里注意，清除vuex的数据是删除完sessionStorage，然后将页面刷新即可
因为vuex的数据是通过sessionStorage取出的

logout () {
      sessionStorage.clear()
      this.$router.push({ name: 'login' })
      // 删除vuex中的数据 让当前页面刷新
      window.location.reload()
    }

界面的控制

登录成功后，将token数据存储在sessionStorage中，判断是否登录
在这里插入图片描述
问题：这样用户在登录之后就可以访问其他界面了，但如果用户A登录之后他只能访问a页面，他不能访问b页面，但是这时候他还是可以通过地址栏输入进入到b页面

解决：当然我们也可以设置路由导航守卫，但是如果有多个页面，设置会非常不方便，并且对于用户A来说，它是不用访问b页面的，这时候我们何不对A不显示b页面，这个时候我们就用到了动态路由
2. 动态路由
router.js
根据当前用户所拥有的的权限数据来动态添加所需要的路由
先定义好所有的路由规则
在这里插入图片描述
定义路由规则和字符串的映射关系
ruleMapping的键是后端返回的path，值是路由规则名

const ruleMapping = {
  table: tableRule,
  users: userRule,
  image: imageRule
}

router.options.routes
在这里插入图片描述

登录成功之后动态添加路由，注意这个initDynamicRoutes的方法需要暴露出去在登录页面调用
currentRoutes[1].children就是home页面的子路由

export function initDynamicRoutes () {
  // console.log(router)
  // 根据二级权限 对路由规则进行动态的添加


### HTTP

* HTTP 报文结构是怎样的？

* HTTP有哪些请求方法？

* GET 和 POST 有什么区别？

* 如何理解 URI？

* 如何理解 HTTP 状态码？

* 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

* 对 Accept 系列字段了解多少？

* 对于定长和不定长的数据，HTTP 是怎么传输的？

* HTTP 如何处理大文件的传输？

* HTTP 中如何处理表单数据的提交？

* HTTP1.1 如何解决 HTTP 的队头阻塞问题？

* 对 Cookie 了解多少？

* 如何理解 HTTP 代理？

* 如何理解 HTTP 缓存及缓存代理？

* 为什么产生代理缓存？

* 源服务器的缓存控制

* 客户端的缓存控制

* 什么是跨域？浏览器如何拦截响应？如何解决？  

  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/3a28cc7b978db5d78ce5f1c5ec78122b.png)