Vue路由守卫（权限拦截控制）

最新推荐文章于 2024-01-30 00:15:00 发布

忧郁火龙果

最新推荐文章于 2024-01-30 00:15:00 发布

阅读量905

点赞数

分类专栏： Vue笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/LQlove1/article/details/128629659

版权

Vue笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章介绍了在Vue.js应用中实现权限拦截的策略，包括使用路由守卫检查本地token来决定是否已登录，以及在访问父组件时获取并存储用户信息。如果token过期，用户将被重定向至登录页面。同时，代码示例展示了如何在组件创建前进行权限检查，并利用ElementUI的Message组件显示错误信息。

摘要由CSDN通过智能技术生成

文章目录

一、权限拦截控制思路

一、权限拦截控制思路


 1. 设置组件路由守卫，从本地拿到token，如果有token就代表已经登录了，可以访问其他页面，如果没有token就提示未登录，跳转到登录页面
 2. 如果有token，在访问一个父组件的时候就携带该token发送请求获取用户信息，获取用户信息成功就把信息存到vuex中，失败了，就是token过期了，返回登陆页面

父组件代码：

<script>
import myAside from "@/views/managehome/aside/Aside.vue";
import myHeader from "@/views/managehome/header/Header.vue";
import myMian from "@/views/managehome/main/Main.vue";
import { getUserInfo } from "@/api/index.js";
// 引入messsage
import { Message } from "element-ui";
export default {
  name: "myManagehome",
  components: {
    myAside,
    myHeader,
    myMian
  },
  async created() {
    await getUserInfo()
      .then(res => {
        if (res.data.code == 1000) {
          this.$store.commit('UserInfo/SETUSERINFO',res.data.data)
        } else {
          this.$router.push("/login");
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  // 组件路由首位
  beforeRouteEnter(to, from, next) {
    const token = localStorage.getItem('token')
    if(token){
      next()
    }else{
      Message.error('未登录')
      next('/login')
    }
  }
};
</script>