浅谈如何通过node,addRoutes实现动态权限路由菜单的示例

需求

1.配置支持nodejs

md5介绍:MD5是一种常用的哈希算法,主要用于对一些重要数据进行“签名”,当然这些数据可以是任意的。最终得到的“签名”通常都是一个16或32位的十六进制的字符串。

最近接手一个后台管理系统,需要实现导航菜单从后台拉取的效果;根据登录用户的权限不同分别拉出来的导航菜单也不一样,另外可操作的界面也存在区别。

配置nodejs支持,博主下载的2017.02的最新版本,下载后如果你自己已经有安装node了,那么ide会像myeclipse一样自动找到node的位置并添加配置,不需要你手动配置。

实际工作开发中,是不会有人直接将密码明文直接放到数据库当中的。因为这种做法是非常不安全的,一般都要对其进行MD5加密!比如某用户的密码是“123456“(当然这样的密码也没有安全性可言),经过MD5处理后即为:

问题

如果你没有成功,那么到File->Setting->输入Node.js(选中点进去)->Node
imterpreter(选择node的安装路径即可)->确定

“e10adc3949ba59abbe56e057f20f883e”。这样做的好处主要有以下两点:

因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了。接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现。

2.设置自动补全

1、预防网站运营内部人员知道你的密码,而做一些不道德的行为。因为有很多人为了方便将所有的密码都设置成一样的。

经过一番折腾终于实现了功能,记录下来便于回顾,也希望能帮助到同样有需求的同志。

首先需要下载core
code,File->Setting->输入Node.js(选中点进去)->第二行有个enable(旁白是说源码是否下载应用)->确定

2、预防外部的攻击,如果你注册的网站被黑客进行攻击,得到该网站的一些数据,拿到的也是一堆经MD5处理后的字符串。

思路

然后File->Setting->Language&Frameworks->JavaScript->Libraries->勾选Nodejs
Core->确定

注意:MD5一般是不能够被反编译的。前提是你的密码不要设置的过于简单。这也是现在为什么越来越多的网站,对用户设置的密码有了越来越高的要求,不仅仅是密码长度要够长,而且密码里还要包括数字,大小字母,以及特殊字符串。

1、首先在本地配置好固定不变的路由地址,例如登录,404这些页面,如下:

以上这篇webstorm配置支持nodejs并自动补全的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本篇文章将主要针对于在NODE.JS中如何对数据进行MD5加密:

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/vuex/store'
Vue.use(Router)

let router = new Router({
 routes: [
  {
   path: '/login',
   name: 'login',
   meta: {requireAuth: false},
   // 模块使用异步加载
   component: (resolve) => require(['../components/login/login.vue'], resolve)
  }]
})
// 拦截登录,token验证
router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth === undefined) {
  if (store.state.token) {
   next()
  } else {
   next({
    path: '/login'
   })
  }
 } else {
  next()
 }
})
export default router

您可能感兴趣的文章:

  • webstorm中配置nodejs环境及npm的实例
  • nodejs开发环境配置与使用
  • 配置nodejs环境的方法
  • 修改Nodejs内置的npm默认配置路径方法

直接在NODE中引入md5依赖包:

配置好这些固定的路由后我们才能够到登录页面,不然是无法继续下去的。

下载安装md5依赖包

2、然后重要的一步,我们需要跟后端老铁约定好需要返回的权限菜单列表信息;首先这里我们先分析一下自己需要的路由结构,这里以我自己的路由作为例子。如果是我自己直接定义路由的话,会是以下结构:

npm install md5
let router = new Router({
 routes: [
  {
   path: '/login',
   name: 'login',
   meta: {requireAuth: false},
   component: (resolve) => require(['../components/login/login.vue'], resolve)
  },
  {
    path: '/',
    redirect: '/layout'
  },
  {
    path: '/layout',
    component: (resolve) => require(['../layout.vue'], resolve),
    children: [
      {
        path: 'index', 
        meta: {
          type: '1',    //控制是否显示隐藏 1显示,2隐藏
          code: 00010001, // 后面需要控制路由高亮
          title: '首页',  // 菜单名称
          permissonList: [] // 权限列表
        }
        component: (resolve) => require(['@/components/index/index.vue'], resolve)
      },
      {
      ...
      }   
    ]
  }]
})

md5加密实例:

发表评论

电子邮件地址不会被公开。 必填项已用*标注