一、效果
在登录界面修改路由无法进入其他页面,需先登录才能。这里只是进行简单的校验,校验是否登录。
二、实现步骤
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