一、效果

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

二、实现步骤

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.获取tokenconst token = localStorage.getItem("mms-token");if (!token) {//1.1如果未获取到//访问非登录页，则跳转到登录页if (to.path !== "/login") {next({ path: "/login" });} else {//在登录页next();}} else {//1.2获取到toktnconst 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