看标题可以分为两部分,
1.首先路由安全卫士是干嘛的 。
路由安全卫士beforeEach,我个人理解为拦截普通用户查阅管理员能查阅的网页, 讲的通俗点就是 普通用户跟管理员的区别, 管理员能看全部 普通用户只能看局部。
2.其次,用户是否登录 。
我个人理解为就是判断你所输入的账号是否为管理员, 如果是的话那么设置了权限的网页就可以浏览 ,如果是普通用户那么就跳转404。
3. 那么应该怎么去实现呢?
4. 找到main.js 引入
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if(JSON.parse(localStorage.getItem('islogin'))){
next();
}else {
next({
path:'/404' //这段意思是 如果你没有登录 就看不到页面直接跳转404
}) // 如果你用管理员的身份登录就可以看到页面
}
}
else {
next();
}
if(to.fullPath == "/login"){
if(JSON.parse(localStorage.getItem('islogin'))){
next({
path:from.fullPath
});
}else {
next();
}
}
});
- 找到 router 里面的 index.js 就是放路由的文件
export default new Router({
routes: [
{
path: "/login", //登录页面
component: login,
meta:{}
},
{ //这个是想要设置权限的页面
path: '/jiaosemessage', //名字这些随意 根据自己的文件名字命名
component: resolve => require(['../components/shou/jiaosemessage/jiaosemessage.vue'], resolve),
meta: {
requireAuth: true, // 这个写上, 意思是进入这个页面需要登录
title: '角色管理'
}
},
]
})
两个页面 即登录页面和自己想设置权限的页面 。
6. 找到Vuex 里面的 store.js 文件 没有的话就install一下吧
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
islogin:''
},
mutations:{
login:(state,n) => {
let islogin = JSON.parse(n);
localStorage.setItem('islogin',JSON.stringify(islogin));
state.islogin = islogin;
}
},
getters: {},
actions: {}
})
引入以上字段 个人理解为 监测islogin的变化,以此表示在页面上显示登录还是已经登录
7. 接下来 就是在组件里 写下触发的方法
<template>
<button @click="dialogFormAdd()">登 录</button>
<button @click="dialogFormApp()">退 出 登 录</button>
</template>
<script>
dialogFormAdd(){
var GOC = true;
this.$store.commit("login", GOC);
this.$router.push("/home"); //跳转到你设置了权限的页面
console.log("登录成功");
},
dialogFormApp(){
var GOC = false;
this.$store.commit("login", GOC);
this.$router.push("/login");
console.log("退出登录");
}
</script>
这里贴 一个 带判断的带输入框的例子 还有本地localStorage变化的 小demo
<template>
<div>
<el-form :model="ruleForm" label-width="60px" ref="ruleForm">
<el-form-item label="手机号">
<el-input v-model="ruleForm.username" placeholder="请输入手机号码" clearable></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="ruleForm.password" placeholder="请输入密码" show-password></el-input>
</el-form-item>
</el-form>
<el-button @click="dialogFormAdd('formdong')" >登 录</el-button>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {
ruleForm: {
username: "",
password: ""
},
};
},
methods: {
dialogFormAdd(formdong) {
var name = this.ruleForm.username;
var pass = this.ruleForm.password;
if (name == "" || name == null) {
this.$message.error("请输入用户名");
return;
} else if (pass == "" || pass == null) {
this.$message.error("请悄悄地输入密码");
return;
} //上面那段为校验
if (this.ruleForm.username == "123456" && this.ruleForm.password == "123456") {
var GOC = true; //这里做了个判断 意思是只有密码账号都为123456 才能进入设置了权限的页面
this.$store.commit("login", GOC); //没有用后台,就直接写了段死的
this.$router.push("/home");
console.log("登陆成功");
} else { //这里意思 就是 密码账号随便填也能跳转 但进不去设置了权限的页面
this.$router.push("/home");
}
}
}
}
</script>
登录成功为true 退出登录为false
8.最后,重新梳理一下 Vuex 控制登录的状态,路由安全卫士拦截没有权限的账号
个人理解 如有不足 望指出