【vue会员管理系统】篇七之权限校验

一、效果

在登录界面修改路由无法进入其他页面，需先登录才能。这里只是进行简单的校验，校验是否登录。

二、实现步骤

2.1src下新建permission.js

/**
 * 权限校验文件
 * 通过使用 Vue Router中的前置钩子函数beforeEach（通，from，next）实现
 * 当进行路由跳转前，进行判断是否已经登录，如果登录过久允许访问非登录界面，否则跳转到登录页
 *
 * to：即将要进入的目标路由对象
 * from：即将要离开的路由对象
 * next；一个方法，可以指定路由地址进行跳转
 */

import router from "./router";
import { getuserInfo } from "./api/login";
router.beforeEach((to, from, next) => {
  //1.获取token
  const token = localStorage.getItem("mms-token");
  if (!token) {
    //1.1如果未获取到
    //访问非登录页，则跳转到登录页
    if (to.path !== "/login") {
      next({ path: "/login" });
    } else {
      //在登录页
      next();
    }
  } else {
    //1.2获取到toktn
    const userInfo = localStorage.getItem("mms-user");
    if (userInfo) {
      //获取到，跳转到目标路由
      next();
    } else {
      //本地无用户信息，通过token获取
      getuserInfo(token).then((response) => {
        const resp = response.data;
        if (resp.flag) {
          //获取到用户信息，则进行非登录界面，否则跳转回登录界面
          //保存用户信息到本地
          localStorage.setItem("mms-user", JSON.stringify(resp.data));
          next();
        } else {
          //未获取到用户信息
          next({ path: "/login" });
        }
      });
      //
    }
  }
});

2.2引入权限校验文件

在Main.js中引入

import "./permission";

三、运行

npm run serve