vue能控制未登陆的请求不能访问url_vue 地址栏直接输入 URL 跳过登录界面拦截不成功....

最新推荐文章于 2024-09-27 11:37:14 发布

weixin_39957271

最新推荐文章于 2024-09-27 11:37:14 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue能控制未登陆的请求不能访问url

本文链接：https://blog.csdn.net/weixin_39957271/article/details/111724643

本文介绍如何在 Vue 应用中实现登录拦截，确保未登录用户无法直接通过 URL 访问受保护的页面。主要涉及在 `main.js` 中设置路由拦截器，检查 vuex 中的 token 信息，并在登录组件中处理登录逻辑。当用户尝试访问需要登录的页面时，若未登录则重定向到登录页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//main.js 中的跳转拦截代码

import {getToken} from '@/common/auth'

router.beforeEach((to,from,next)=>{

if(to.meta.requireAuth){ //要跳转的页面需要登陆权限

if(getToken()){ //通过vuex state 获取当前的token信息

next();

}

else{

next({

path:'/login',

query:{redirect:to.fullPath}

})

}

else{

next();

}

})

//router

export default new Router({

routes: [

{

path:'/login',

name:'Login',

component:Login,

meta:{

requireAuth: false,

}

{

path: '/',

name: '总览',

redirect:'/event',

component: Home,

iconCls:'iconfont icon-zonglan',

leaf:true, //没有子节点

children:[

{

path:'allscan',

name:'总览',

component:resolve=>require(['@/views/allscan/AllScan'],resolve),

meta:{

requireAuth: true,

}

]

{

path: '/',

name:'事件管理',

component:Home,

iconCls:'iconfont icon-shijian',

leaf:true,

children:[

{

path:'/event',

name:'事件管理',

component:resolve=>require(['@/views/event/EventManage'],resolve),

meta:{

keepAlive:true, //the component is't to be cache.

requireAuth: true,

}

{

path:'/event',

name:'事件管理',

component:resolve=>require(['@/views/event/details/RateManage'],resolve),

meta:{

requireAuth: true,

children:[

{

path:'/rate',

name:'事件详情',

component:resolve=>require(['@/views/event/details/RateManage'],resolve),

}

]

}

])

//store

const state={

token:getToken();

actions:{

LoginByUser({commit},userInfo){

const username=userInfo.username.trim();

let params={

"email":username,

"password":userInfo.password

}

return new Promise((resolve,reject)=>{

loginByUsername(params).then(res=>{

console.log(res);

const data=res.data;

commit('SET_TOKEN',data.token);

setToken(data.token);

resolve(data);

}).catch(error=>{

reject(error);

})

}

//Login组件中登录

self.$store.dispatch('LoginByUser',this.loginForm).then((res)=>{

self.$router.push({path:self.redirect||'/'});

}).catch(()=>{

Message({message:'用户名或密码错误，请检查！',type:'error',duration:3*1000})

})