导航守卫小结

最新推荐文章于 2021-12-30 19:56:07 发布
VIP文章 最新推荐文章于 2021-12-30 19:56:07 发布
阅读量80 收藏 1
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/donnien/article/details/118995667
版权

导航守卫

在我们的项目中，并不是所有的页面都能自由的跳转，有些页面需要登陆之后再跳转

现在的问题：不登陆也能进入到个人中心页–不合理

解决：添加导航守卫，判断用户是否登陆，如果登陆则进行跳转，否则重定向到登陆页

在src/router/index.js中添加守卫，限制用户的跳转

登陆成功之后存储token到本地存储

if (res.data.message === "登录成功") {
   
    // 在跳转之后，存储token到本地存储
    localStorage.setItem('heima_65_token'
最低0.47元/天 解锁文章
Don_ixu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VueRouter导航守卫用法详解
08-28
主要介绍了VueRouter导航守卫的详细用法以及分类介绍，有兴趣的朋友学习参考下吧。
什么是路由导航守卫
Erictezx的博客
12-25 3188
简单来说路由导航守卫就是.可以让我们对用户要跳转的路由做一次检查，符合条件的就放行，不符合条件则强制用户跳转至登录页面,说白了就时路由导航守卫是为了路由跳转之前做的检查及操作 1.全局前置守卫----router.beforeEach router.beforeEach注册一个全局前置守卫： const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // to:要去哪个页面 // .
路由导航守卫
tel15387005147的博客
12-30 376
路由导航守卫 router.beforeEach router.afterEach router.beforeResolve beforeEnter beforeRouteEnter beforeRouteUpdate(2.2 新增) beforeRouteLeave 1.全局前置守卫----router.beforeEach router.beforeEach注册一个全局前置守卫： const router = new VueRouter({ ... }) router.b..
后台系统的前置导航守卫
haodanzj的博客
08-27 149
首先先放一个前置导航守卫的流程图 一个进度条的小插件 用插件：NProgress NProgress官网。 注意 使用NProgress之前,需要先下载 npm i nprogress 我们只需要import引用来写就行了。 import NProgress from 'nprogress' // 引用进度条 import 'nprogress/nprogress.css' // progress bar style // 全局前置路由守卫 // to: 要去哪个页面 // from:从哪里
通俗易懂的谈谈 路由导航守卫
RatherCriticall的博客
12-30 97
路由导航守卫 router.beforeEach router.afterEach router.beforeResolve beforeEnter beforeRouteEnter beforeRouteUpdate(2.2 新增) beforeRouteLeave 1.全局前置守卫----router.beforeEach router.beforeEach注册一个全局前置守卫： const router = new VueRouter({ ... }) router...
详解vue-router导航守卫
10-17
今天小编就为大家分享一篇关于详解vue-router导航守卫，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue 路由守卫(导航守卫)及其具体使用
10-15
主要介绍了vue 路由守卫(导航守卫)及其具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue2.0 实现导航守卫（路由守卫）
08-27
vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。这篇文章主要介绍了vue2.0 实现导航守卫（路由守卫）的相关知识,需要的朋友可以参考下
vue项目打包以及优化
Donnien的博客
07-28 1654
vue项目的打包上线及优化 项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理 vue项目的打包 脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包 打开终端，切换到项目根目录 输入命令：npm run build 会在当前项目的根目录下生成一个dist文件夹，里面就是打包后的文件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NISVuSR5-1627475455629)(img\01-打包后的文件目录
element-ui Navbar使用小结
Donnien的博客
07-27 1337
左侧导航 NavMenu 导航菜单 el-menu:整体菜单组件 unique-opened：是否在同一时间只保留一个菜单项的展开 router：是否使用 vue-router 的模式，启用该模式会在激活导航时以el-menu-item的 index 作为 path 进行路由跳转 default-active：默认被展开的菜单项，它 的值为el-menu-item的index default-openeds:当前需要展开的菜单项 el-submenu：一级菜单项 index:当前一级菜单项的唯一
组件递归小结
Donnien的博客
07-23 791
组件递归：组件内部调用组件自身 细节：不能在当前组件中使用import+components的方式引入自身并注册来使用 Unknown custom element: <hmCommentItem> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 翻译：未知的用户元素hmCommentItem，你有没有正确的注册这个组件.
js文件内使用第三方库组件
Donnien的博客
07-27 762
登陆后页面回跳功能实现
Donnien的博客
07-21 414
页面回跳 在文章详情页，如果没有登陆，则应该通过拦截器重定向到登陆页 但是有一个需求：登陆成功之后，仍然回到当前文章详情页 解决： 1.当重定向到登陆页的时候，将当前文章详情页的地址做为参数传递给登陆页 2.在登陆成功之后，根据之前传递的地址进行回跳 将当前文章详情页的地址做为参数传递给登陆页 // src/utils/request.js 添加响应拦截器 核心代码是第7行 axios.interceptors.response.use(function (response) {// 响应成功 co
Proxy&Reflect(vue3.0响应式数据劫持原理)
Donnien的博客
06-15 345
let arr = [1,2,3] let proxy = new Proxy(arr,{ // 获取值时触发 get(target,key,receiver){ console.log('获取值'); // Reflect和Proxy都是成对出现的 (Reflect一般被叫做反射) // const res = Reflect.get(target,key,receiver) 这句话其实就相当于 target[key] //
跳转重复路由的处理
Donnien的博客
07-23 226
错误 NavigationDuplicated: Avoided redundant navigation to current location: "/comment/108". 解决方法 // 跳转重复路由处理 this.$router.push({ path: `/comment/${this.post.id}` }).catch(() => {});
Vue v-on,data以及methods中的this小结
Donnien的博客
06-10 201
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
Object.defineProperty(Vue2的响应式原理)
Donnien的博客
06-09 102
代码案例 let data = {}; let name = "小林"; Object.defineProperty(data, "name", { get() { console.log("获取data.name时调用了get方法"); return name; }, // 这里接受一个参数,新赋值的值 set(newValue) { // 这里就可以写重新渲染的代码 console.log(`设置data.name为${newValue}时调用了se
登陆后跳转的注意点!!!!
Donnien的博客
07-27 99
一定要记得先存储token再进行跳转!!! 错误示范 this.$router.push({ name: 'index' }) localStorage.setItem('houtai_token',res.data.data.token) 报错提示 登陆时会报错,而且需要点击两次登陆才能登陆成功跳转到首页 正确代码 // 一定要记得先存储token再进行跳转!!!!!!! localStorage.setItem('houtai_token',res.data.data.token)
vue 路由导航守卫
最新发布
08-18
在Vue中，路由导航守卫主要用于守卫导航的过程，可以通过跳转或取消的方式来控制路由的行为。根据官方文档的解释，导航守卫可以分为全局前置守卫、路由独享守卫以及组件级别守卫。全局前置守卫是通过使用router....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值