vue路由登录拦截（vuerouter登录权限控制）
实现原理：
/：指向组件App.vue，它是最外层组件，下⾯的/login和/main对应的组件都会包含在其中；
/login：指向登录组件Login.vue；
/main：指向登录后组件Main.vue，其下会包括很多⼦组件来展⽰不同菜单项。
⽤户有没有登录需要给其指定状态（⽤islogin表⽰），当⽤户登录了，我们⽤localStorage在Login.vue⽂件中为其状态设定为1：methods: {
submitForm(formName) {
let _this = this;
let param = new URLSearchParams();
param.append('username', _this.ruleForm.username);
param.append('password', _this.ruleForm.password);
this.$refs[formName].validate((valid) => {
if (valid) {
_this.$axios({
method: 'POST',
url: '/api/blog/check_login_status/',
data: param
})
.then(res => {
if(){
localStorage.setItem("islogin", 1);
console.Item("islogin"));
_this.$router.push({path: "/main/form/radio"});
}else{
_this.$message('⽤户名或密码错误！');
return false;
}
})
.catch(err => {
console.log(err);
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
这⾥可能会有Django后台获取不到前端axios-post请求提交的参数的问题，⽅法请参考：
退出时需要为其指定状态为0：
localStorage.setItem("islogin", 0);
路由拦截需要⽤到导航守卫，关键代码如下：
router.beforeEach((to, from, next) => {
let islogin = Item("islogin");
islogin = Boolean(Number(islogin));
if(to.path == "/login"){
if(islogin){
next("/table");
}else{
next();
}
}else{
// requireAuth：可以在路由元信息指定哪些页⾯需要登录权限
a.requireAuth && islogin) {
next();
}else{
next("/login");
}
}
})
src/router/index.js中，可以看到所有路由如下：let router = new Router({
mode: 'hash',
routes: [
{
path: '/',
name: 'index',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
component: Login,
meta: {
title: 'Login',
icon: 'el-icon-eleme',
requireAuth: true
}
},
{
path: '/main',
name: 'main',
component: Main,
show: false,
meta: {
title: 'Main',
icon: 'el-icon-eleme',
requireAuth: true
},
children: [
{
path: '/main/form/radio',
name: 'radio',
component: Radio,
show: true,
meta: {
title: 'Radio',
icon: 'el-icon-s-marketing',
requireAuth: true
}
},
{
path: '/main/form/checkbox',
name: 'checkbox',
component: Checkbox,
show: true,
meta: {
title: 'Checkbox',
icon: 'el-icon-s-marketing',
django登录注册功能
requireAuth: true
}
},
{
path: '/main/data/table',
name: 'table',
component: Table,
show: true,
meta: {
title: 'Table',
icon: 'el-icon-s-marketing',
requireAuth: true
}
},
{
path: '/main/data/tag',
name: 'tag',
component: Tag,
show: true,
meta: {
title: 'Tag',
icon: 'el-icon-s-marketing',
requireAuth: true
}
},
{
path: '/main/button',
name: 'button',
component: Button,
show: true,
meta: {
title: 'Button',
icon: 'el-icon-s-order',
requireAuth: true
}
},
{
path: '/main/tabs',
name: 'tabs',
component: Tabs,
show: true,
meta: {
title: 'Tabs',
icon: 'el-icon-s-ticket',
requireAuth: true
}
},
{
path: '/main/echarts',
name: 'echarts',
component: Echarts,
show: true,
meta: {
title: 'Echarts',
icon: 'el-icon-s-marketing',
requireAuth: true
}
}
]
}
]
});
我们只需要把/main的⼦路由在菜单中循环出来，其它不需要显⽰，所以在Main.vue中增加如下⽅法提取/main的所有⼦路由：  methods: {
getRoutes() {
for (let i = 0; i < this.$utes.length; i++) {
if (this.$utes[i].name === "main") {
return this.$utes[i].children;
}
}
}
}
关键⽂件代码：
router/index.js：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Main from '@/components/Main'
import Radio from '@/components/Radio'
import Checkbox from '@/components/Checkbox'
import Table from '@/components/Table'
import Tag from '@/components/Tag'
import Button from '@/components/Button'
import Tabs from '@/components/Tabs'
import Echarts from '@/components/Echarts'
Vue.use(Router);
let router = new Router({
mode: 'hash',
routes: [
{
path: '/',
name: 'index',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
component: Login,
meta: {
title: 'Login',
icon: 'el-icon-eleme',
requireAuth: true
}
},
{
path: '/main',
name: 'main',
component: Main,
show: false,
meta: {
title: 'Main',
icon: 'el-icon-eleme',
requireAuth: true
},
children: [
{
path: '/main/form/radio',
name: 'radio',
component: Radio,
show: true,
meta: {
title: 'Radio',
icon: 'el-icon-s-marketing',            requireAuth: true
}
},
{
path: '/main/form/checkbox',          name: 'checkbox',
component: Checkbox,
show: true,
meta: {
title: 'Checkbox',
icon: 'el-icon-s-marketing',            requireAuth: true
}
},
{
path: '/main/data/table',
name: 'table',
component: Table,
show: true,
meta: {
title: 'Table',
icon: 'el-icon-s-marketing',            requireAuth: true
}
},
{
path: '/main/data/tag',
name: 'tag',
component: Tag,
show: true,
meta: {
title: 'Tag',
icon: 'el-icon-s-marketing',            requireAuth: true
}
},
{
path: '/main/button',
name: 'button',
component: Button,
show: true,
meta: {
title: 'Button',
icon: 'el-icon-s-order',
requireAuth: true
}
},
{
path: '/main/tabs',
name: 'tabs',
component: Tabs,
show: true,
meta: {
title: 'Tabs',
icon: 'el-icon-s-ticket',
requireAuth: true
}
},
{
path: '/main/echarts',
name: 'echarts',
component: Echarts,
show: true,
meta: {
title: 'Echarts',
icon: 'el-icon-s-marketing',
requireAuth: true
}
}
]
}
]
});
export default router
router.beforeEach((to, from, next) => {
let islogin = Item("islogin");
console.log(islogin);
console.log(to.path);
islogin = Boolean(Number(islogin));
if(to.path == "/login"){
if(islogin){
next("/main/form/radio");
}else{
next();
}
}else{
// requireAuth：可以在路由元信息指定哪些页⾯需要登录权限
a.requireAuth && islogin) {
next();
}else{
next("/login");
}
}
})
Login.vue：
<template>
<div id="login-container">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">      <el-form-item label="⽤户名" prop="checkUser">
<el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
components: {
},
data() {
var validateUser = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输⼊⽤户名'));
}  else {
callback();
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输⼊密码'));
} else {
callback();
}
};
return {
ruleForm: {
username: '',
password: ''
},
rules: {
checkUser: [
{ validator: validateUser, trigger: 'blur' }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。