在后台管理项目中 我们经常会根据不同的用户权限 来动态生成不同的路由导航 以达到权限控制（不同权限生成的路由导航不同）
流程
用户在登录页面输入账号密码---》后端接收判断用户权限---》后端根据不同的用户权限返回对应的导航数据----》前端生成对应的路由导航
重点：动态生成路由
1 前端页面创建
创建登录页面并设置路由
创建登录页面完成用户登录界面 在views下创建LoginView,vue登录页
<template>
<div>
<h1>我是登录页面</h1>
用户名：<input type="text"/>
密码：<input type="text"/>
<button>点我登录</button>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
配置登录页路由规则
配置登录页路由规则 在router下的index.js配置路由规则
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'login',
component: () => import('../views/LoginView.vue')
},
{
path:"/",
redirect:"/login"
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
创建首页 并配置路由规则
在views下创建首页 并配置路由规则
<template>
<div>
我是首页
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'login',
component: () => import('../views/LoginView.vue')
},
{
path: '/home',
name: 'home',
component: () => import('../views/HomeView.vue')
},
{
path:"/",
redirect:"/login"
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
根据前期的项目的原型设计 创建不同用户权限的页面
原型设计工具 墨刀 蓝湖 墨客
在views下创建不同权限用户的所有页面
<template>
<div>
我是管理员的--用户管理页面
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
div{
width: 100%;
height: 500px;
background-color: rgb(156, 0, 133);
}
</style>
2.登录请求后台 得到不同权限的用户数据
接口是模拟的 密码不限制 只限制了 用户名进行测试
接口地址:http://localhost:8899/login
参数:uname admin:管理员 user:普通用户
方式get
返回值：
userid ： 1普通用户 0 管理员 -1登录失败
<template>
<div>
<h1>我是登录页面</h1>
用户名：<input type="text" v-model="inputa" /> 密码：<input
type="text"
v-model="inputb"
/>
<button @click="fun()">点我登录</button>
</div>
</template>
<script>
import $http from "axios";
export default {
data() {
return {
inputa: "",
inputb: "",
};
},
methods: {
fun() {
// 这里没有使用拦截器与api封装工作的时候需要使用
$http({
url: "http://localhost:8899/login",
params: { uname: this.inputa, upwd: this.inputb },
}).then((ok) => {
console.log(ok);
});
},
},
};
</script>
<style>
</style>
3.判断用户是否登陆成功
fun() {
// 这里没有使用拦截器与api封装工作的时候需要使用
$http({
url: "http://localhost:8899/login",
params: { uname: this.inputa, upwd: this.inputb },
}).then((ok) => {
console.log(ok);
// 判断是否登录成功
if(ok.data.userid!=-1){
alert("欢迎您"+ok.data.msg)
}else{
alert("用户名密码错误请重新登录")
}
});
},
4 使用this.$router.addRoutes()动态添加路由
在Login页面登陆成功之后 可以得到后台返回的路由信息 那么我们就使用addRoutes来进行动态添加路由
fun() {
// 这里没有使用拦截器与api封装工作的时候需要使用
$http({
url: "http://localhost:8899/login",
params: { uname: this.inputa, upwd: this.inputb },
}).then((ok) => {
console.log(ok);
// 判断是否登录成功
if(ok.data.userid!=-1){
alert("欢迎您"+ok.data.msg)
// 在登陆成功的时候使用addRoutes添加动态路由
this.$router.addRoutes([
{
path:"/home",
name:"hone",
// 不要忘了引用home页面 import Home from "@/views/HomeView.vue"
component:Home,
children:[]//这里的children就是后台给我们的路由数据 但是我们需要处理路由数据
}
])
}else{
alert("用户名密码错误请重新登录")
}
});
},
5处理后台返回的数据并动态生成路由
因为后台返回的数据 和我们在vue中使用的路由规则格式不匹配 所以我们需要处理他 但是不要忘了 把处理好的数据要放到addRoutes生成的二级路由中
fun() {
// 这里没有使用拦截器与api封装工作的时候需要使用
$http({
url: "http://localhost:8899/login",
params: { uname: this.inputa, upwd: this.inputb },
}).then((ok) => {
console.log(ok);
// 处理路由数据
let children=[];
// 遍历后台数据 生成我们的路由规则
for(var i=0;i<ok.data.routerdata.length;i++){
// 这里要先读取 否则在下面得路由拦截在中就没有办法获取了
let routerdata=ok.data.routerdata[i]
children.push({
path:routerdata.path,
name:routerdata.name,
component: () => import(`@/views/${routerdata.demo}`)
})
}
// 把children变量放到addRoutes生成的二级路由规则中
// 处理路由数据
// 判断是否登录成功
if(ok.data.userid!=-1){
alert("欢迎您"+ok.data.msg)
// 在登陆成功的时候使用addRoutes添加动态路由
this.$router.addRoutes([
{
path:"/home",
name:"hone",
// 不要忘了引用home页面 import Home from "@/views/HomeView.vue"
component:Home,
children//这里的children就是后台给我们的路由数据 但是我们需要处理路由数据
}
])
}else{
alert("用户名密码错误请重新登录")
}
});
},
6缓存路由信息并且动态生成路由导航
缓存数据
fun() {
// 这里没有使用拦截器与api封装工作的时候需要使用
$http({
url: "http://localhost:8899/login",
params: { uname: this.inputa, upwd: this.inputb },
}).then((ok) => {
console.log(ok);
// 处理路由数据
let children=[];
// 遍历后台数据 生成我们的路由规则
for(var i=0;i<ok.data.routerdata.length;i++){
// 这里要先读取 否则在下面得路由拦截在中就没有办法获取了
let routerdata=ok.data.routerdata[i]
children.push({
path:routerdata.path,
name:routerdata.name,
component: () => import(`@/views/${routerdata.demo}`)
})
}
// 把children变量放到addRoutes生成的二级路由规则中
// 处理路由数据
// 缓存后台请求的路由数据方便动态生成导航
window.sessionStorage.setItem("link",JSON.stringify(ok.data.routerdata))
// 缓存后台请求的路由数据方便动态生成导航
// 判断是否登录成功
if(ok.data.userid!=-1){
alert("欢迎您"+ok.data.msg)
// 在登陆成功的时候使用addRoutes添加动态路由
this.$router.addRoutes([
{
path:"/home",
name:"hone",
// 不要忘了引用home页面 import Home from "@/views/HomeView.vue"
component:Home,
children//这里的children就是后台给我们的路由数据 但是我们需要处理路由数据
}
])
}else{
alert("用户名密码错误请重新登录")
}
});
},
在home页面生成二级路由导航 与设置二级路由出口
<template>
<div>
我是首页
<!-- 根据数据遍历生成导航 -->
<router-link v-for="(v,i) in routerdata" :key="i" :to="'/home/'+v.path">{{v.path}}--{{v.name}}</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data(){
return {
routerdata:[]
}
},
mounted(){
// 把得到的路由规则转换之后传递给data数据
this.routerdata=JSON.parse(window.sessionStorage.getItem("link"))
}
}
</script>
<style>
</style>
在登录页面请求完成后跳转到home页面
fun() {
// 这里没有使用拦截器与api封装工作的时候需要使用
$http({
url: "http://localhost:8899/login",
params: { uname: this.inputa, upwd: this.inputb },
}).then((ok) => {
console.log(ok);
// 处理路由数据
let children=[];
// 遍历后台数据 生成我们的路由规则
for(var i=0;i<ok.data.routerdata.length;i++){
// 这里要先读取 否则在下面得路由拦截在中就没有办法获取了
let routerdata=ok.data.routerdata[i]
children.push({
path:routerdata.path,
name:routerdata.name,
component: () => import(`@/views/${routerdata.demo}`)
})
}
// 把children变量放到addRoutes生成的二级路由规则中
// 处理路由数据
// 缓存后台请求的路由数据方便动态生成导航
window.sessionStorage.setItem("link",JSON.stringify(ok.data.routerdata))
// 缓存后台请求的路由数据方便动态生成导航
// 判断是否登录成功
if(ok.data.userid!=-1){
alert("欢迎您"+ok.data.msg)
// 在登陆成功的时候使用addRoutes添加动态路由
this.$router.addRoutes([
{
path:"/home",
name:"home",
// 不要忘了引用home页面 import Home from "@/views/HomeView.vue"
component:Home,
children//这里的children就是后台给我们的路由数据 但是我们需要处理路由数据
}
])
// 跳转到登录页面
// 跳转到登录页面
// 跳转到登录页面
this.$router.push("/home")
}else{
alert("用户名密码错误请重新登录")
}
});
},
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
