搭建Vue从Vue-cli到router路由护卫的实现

2023-08-08 20:34:07 81

别的不多说,开始动爪把,

首先安装vue-cli mac:sudonpminstall-g@vue/cli

github:

https://github.com/XinYueXiao/vue-routes

1、Vue-cli基础使用

1.1创建测试项目vuecreatevue-routes

1.2创建成功,启动项目 yarnserve

在http://localhost:8080/就可以看到欢迎:clap:页面了

1.3搞点自定义配置,新建vue.config.js

consttitle='双11剁手啦'
constport='1111'
module.exports={
publicPath:'/wxy',
//自定义端口号
devServer:{
port
},
//自定义变量
configureWebpack:{
name:title
}
}

配置完成后重新启动yarnserve效果图

如何配置svg图标

1）准备一个svg，例如：src/icons/svg/hg.svg

2）安装loaderyarnaddsvg-sprite-loader

3）对config进行链式操作即可修改loader

constpath=require('path')
//处理地址
functionresolve(dir){
returnpath.join(__dirname,dir)
}
module.exports={
...,
chainWebpack(config){
//安装loader,对config进行链式操作即可修改loader、plugins
//1.svgrule中要排除icons目录
config.module.rule('svg')
//转换为绝对地址
.exclude.add(resolve('src/icons'))
//查看配置后svg规则vueinspect--rulesvg
//2.添加一个规则icons
config.module.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons')).end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId:'icon-[name]'
})
}
}

4）svgrule中要排除icons目录后配置

5）添加一个规则icons配置

6）新建src/components/SvgIcon.vue模板




.svg-icon{
width:1em;
height:1em;
vertical-align:-0.15em;
fill:currentColor;
overflow:hidden;
}

7）新建src/icons/index.js 在main.js下引入icon

//src/icons/index.js
importVuefrom'vue'
importSvgIconfrom'@/components/SvgIcon'
//图标自动加载
constreq=require.context('./svg',false,/\.svg$/)
req.keys().map(req)
Vue.component('svg-icon',SvgIcon)

//main.js
import"./icons";

8）在App.vue引入图标

效果如下：

2、router路由守卫

何为守卫，即为阻止无身份者进入组织内部

安装yarnaddvue-router控制路由

安装yarnaddvuex存储身份认证

2.1路由配置

src/router/index.js

importVuefrom"vue";
importRouterfrom"vue-router";
importLayoutfrom'@/layout';//布局页
Vue.use(Router);
//通用页面:不需要守卫，可直接访问
exportconstconstRoutes=[
{
path:"/login",
component:()=>import("@/views/Login"),
hidden:true//导航菜单忽略该项
},{
path:"/",
component:Layout,//应用布局
redirect:"/home",
children:[
{
path:"home",
component:()=>
import(/*webpackChunkName:"home"*/"@/views/Home.vue"),
name:"home",
meta:{
title:"Home",//导航菜单项标题
icon:"hg"//导航菜单项图标
}
}]
}];
//权限页面:受保护页面，要求用户登录并拥有访问权限的角色才能访问
exportconstasyncRoutes=[
{
path:"/about",
component:Layout,
redirect:"/about/index",
children:[
{
path:"index",
component:()=>
import(/*webpackChunkName:"home"*/"@/views/About.vue"),
name:"about",
meta:{
title:"About",
icon:"hg",
roles:['admin','editor']
},
}
]
}
];
exportdefaultnewRouter({
mode:"history",
base:process.env.BASE_URL,
routes:constRoutes
});

布局组件src/layout

路由展示src/App.vue

2.2 准备页面

src/views/About.vue

src/views/Home.vue

src/views/Login.vue

2.3 身份认证

importrouterfrom"./router";
importstorefrom"./store";
constwhiteList=["/home","/login"];//无需令牌白名单
//全局路由守卫
router.beforeEach(async(to,from,next)=>{
//获取令牌判断用户是否登录
consthasToken=localStorage.getItem("token");

//已登录
if(hasToken){
if(to.path==="/login"){
//若已登录没有必要显示登录页，重定向至首页
next({path:"/"});
}else{
//去其他路由，暂时放过
//next()
//接下来执行用户角色逻辑,todo
//1.判断用户是否拥有角色
consthasRoles=
store.state.user.roles&&store.state.user.roles.length>0;

if(hasRoles){
next();
}else{
//2.获取用户角色
constroles=awaitstore.dispatch("user/getInfo");

constaccessRoutes=awaitstore.dispatch("permission/generateRoutes",roles);

//动态添加路由到路由器
router.addRoutes(accessRoutes);

//跳转
next({...to});
}
}
}else{
//未登录
if(whiteList.indexOf(to.path)!==-1){
//白名单中路由放过
next();
}else{
//重定向至登录页
next(`/login?redirect=${to.path}`);
}
}
});

2.4 用户信息设置

importVuefrom"vue";
importVuexfrom"vuex";
importuserfrom'./modules/user'
importpermissionfrom'./modules/permission'

Vue.use(Vuex);

exportdefaultnewVuex.Store({
modules:{
user,permission
}
});

src/store/modules/user.js

conststate={
token:localStorage.getItem("token"),
//其他用户信息
roles:[]
};

constmutations={
SET_TOKEN:(state,token)=>{
state.token=token;
},
SET_ROLES:(state,roles)=>{
state.roles=roles;
},
};

constactions={
//模拟用户登录
login({commit},userInfo){
const{username}=userInfo;
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
if(username==="admin"||username==="jerry"){
commit("SET_TOKEN",username);
localStorage.setItem("token",username);
resolve();
}else{
reject("用户名、密码错误");
}
},1000);
});
},
getInfo({commit,state}){
returnnewPromise((resolve)=>{
setTimeout(()=>{
constroles=state.token==='admin'?['admin']:['editor']
commit('SET_ROLES',roles)
resolve(roles)
},1000);
})
}
};

exportdefault{
namespaced:true,
state,
mutations,
actions,
};

2.5 用户路由权限src/store/modules/permission.js

//导入asyncRoutes，过滤它看当前用户是否拥有响应权限
import{asyncRoutes,constRoutes}from'@/router'

conststate={
routes:[],//完整路由
addRoutes:[],//权限路由
}

constmutations={
//routes:用户可访问的权限路由
SET_ROUTES:(state,routes)=>{
state.addRoutes=routes;
state.routes=constRoutes.concat(routes);
}
}

constactions={
generateRoutes({commit},roles){
//过滤出能访问的路由表
constroutes=filterAsyncRoutes(asyncRoutes,roles)
commit('SET_ROUTES',routes)
returnroutes;
}
}

functionfilterAsyncRoutes(routes,roles){
constres=[];

routes.forEach(route=>{
//复制一份路由
consttmp={...route};
//拥有访问权限
if(hasPermission(roles,tmp)){
if(tmp.children){
//递归子路由
tmp.children=filterAsyncRoutes(tmp.children,roles)
}

res.push(tmp);
}
})

returnres;
}

functionhasPermission(roles,route){
if(route.meta&&route.meta.roles){
returnroles.some(role=>route.meta.roles.includes(role))
}else{
//路由定义中没有roles选项，则不需要权限即可访问
returntrue;
}
}

exportdefault{
namespaced:true,
state,
mutations,
actions
}

2.6最终效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

搭建Vue从Vue-cli到router路由护卫的实现

Thisisanaboutpage

用户登录

随机推荐

搭建Vue从Vue-cli到router路由护卫的实现

Thisisanaboutpage

用户登录

热门推荐

随机推荐