import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'
import register from '@/components/register'
Vue.use(Router) const router = new Router({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: HelloWorld,
meta: {
requiresAuth: true
}
},
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/login',
name: 'login',
component: login,
},
{
path: '/register',
name: 'register',
component: register,
},
]
}); //注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
//获取store里面的token
let token = store.state.token;
//判断要去的路由有没有requiresAuth
if (to.meta.requiresAuth) {
if (token) {
next();
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 将刚刚要去的路由path作为参数,方便登录成功后直接跳转到该路由
});
}
} else {
next();
}
});
export default router;

vue 路由权限的更多相关文章

  1. vue路由权限之访问权限(meta控制是否有访问权限)

    首先登录那权限表 router.beforeEach((to, from, next) => { if(to.path === '/login') { next(); }else{ if(!st ...

  2. vue路由菜单权限设置就button权限设置

    路由权限的设计思路: 首先,我们的需要校验权限的路由的 url,全部由后端返回,后端会返回当前用户的路由树数组.前端在进入页面前请求接口,把数据拿到: 其次,前端会维护一个路由映射组件的列表,如果路由 ...

  3. vue路由守卫用于登录验证权限拦截

    vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...

  4. 【vue】vue的路由权限管理

    前言: 最近闲来无事浏览各种博客,看到了一个关于路由权限的管理,觉得很有用,针对那个博客,准备自己写一个demo. 实现: 路由大致分为用户路由<特定用户才能浏览>和基本路由<所有用 ...

  5. React+DvaJS 之 hook 路由权限控制

    博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...

  6. koa2服务端使用jwt进行鉴权及路由权限分发

    大体思路 后端书写REST api时,有一些api是非常敏感的,比如获取用户个人信息,查看所有用户列表,修改密码等.如果不对这些api进行保护,那么别人就可以很容易地获取并调用这些 api 进行操作. ...

  7. Vue 路由(对路由页面编写做规范)

    前言 上一篇写了“Vue 路由拦截(对某些页面需要登陆才能访问)” 的博客,此篇是续上篇对路由页面模块化,可以看到之前的路由配置都写在main.js中,真正开发肯定不能都写在main.js,所以我们要 ...

  8. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  9. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

随机推荐

  1. 树状数组【洛谷P3586】 [POI2015]LOG

    P3586 [POI2015]LOG 维护一个长度为n的序列,一开始都是0,支持以下两种操作:1.U k a 将序列中第k个数修改为a.2.Z c s 在这个序列上,每次选出c个正数,并将它们都减去1 ...

  2. 《Andrew Ng深度学习》笔记4

    浅层神经网络 1.激活函数 在神经网络中,激活函数有很多种,常用的有sigmoid()函数,tanh()函数,ReLu函数(修正单元函数),泄露ReLu(泄露修正单元函数).它们的图形如下: sigm ...

  3. Mui 选项卡 tab 高度 没有自适应....

    因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是  用一个值 保存 当前 的 高度... 当 点击其他 t ...

  4. php 编码和解码的函数

    URL: urlencode(); //编码 urldecode(); //解码 URL与数组互转: parse_url () http_build_query() base64: base64_en ...

  5. PHP 实时生成并下载超大数据量的 Excel 文件

    //另外由于excel数据是从数据库里逐步读出然后写入输出流的所以需要将PHP的执行时间设长一点 //(默认30秒)set_time_limit(0)不对PHP执行时间做限制. set_time_li ...

  6. docker: Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled (Client.Timeout exceeded while awaiting headers).

    docker: Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled ...

  7. HDU - 2842

    要拆第n个环要求保留第n-1拆除前n-2 对于n,先拆掉n-2再去掉n再放回n-2,然后规模降为n-1 f(n)=2f(n-2)+f(n-1)+1 inline ll mod(ll a){return ...

  8. SQL批量提交修改业务

    把你需要批量提交修改的东西在内存中修改完毕 然后执行以下代码 SqlConnection conn = new SqlConnection(ConnectionString);SqlDataAdapt ...

  9. 【CTF】某xss练手小游戏

    http://test.xss.tv 1.http://47.94.13.75/test/level1.php?name=test 直接插入即可,如: http://47.94.13.75/test/ ...

  10. U盘安装CentOS 7错误 /dev/root does not exist, could not

    问题: U盘安装CentOS 7,显示/dev/root does not exist, could not boot 解决方法: 1. 到windows里面查看U盘名称(例如 "Cento ...