项目地址: vue-simple-template
共三个角色:adan barbara carrie 密码全是:123456
adan 拥有 最高权限 A 他可以看到 red , yellow 和 blue 页面(共三个页面)
barbara 拥有 权限 B 他可以看到 red 和 yellow 页面
carrie 拥有 权限 C 他可以看到 red 和 blue 页面
技术栈
项目初始化
- # cd 到项目文件夹
- cd weven-simple-template
- # 安装依赖 (本项目还安装了其他依赖详情 请见 package.json 文件)
- npm install
- # 运行项目
- npm run dev
项目结构
vue-cil 脚手架初始化项目后,我只修改过 src 文件夹
重点:
- src
- ├── App.vue ---- 页面入口
- ├── api ---- api请求
- │ └── login.js ---- 模拟json对象数据
- ├── assets ---- 主题 字体等静态资源
- │ └── logo.png
- ├── components ---- 组件
- │ ├── index.vue
- │ └── login.vue
- ├── main.js ---- 初始化组件 加载路由
- ├── router ---- 路由
- │ └── index.js
- └── store ---- vuex状态管理
- ├── getters.js
- ├── index.js
- └── modules
- └── login.js
动态路由的关键在于 router 配置的 meta 字段 和 vuex 的 状态共存 (不懂可以先查看官方文档)
router/index.js
- // 初始化路由
- export default new Router({
- routes: [
- {
- path: '/login',
- name: 'Login',
- component: Login
- }
- ]
- });
- // 动态路由 meta 定义了role
- export const powerRouter =[
- { path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
- children: [
- { path: '/red', name: 'red', component: red,},
- { path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
- { path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}
- ]
- }
- ];
store/modules/login.js actions 部分
- Logins({ commit }, info){
- return new Promise((resolve, reject) => {
- let data={};
- loginByUserInfo.map(function (item) { //获取所以用户信息
- if(info.username === item.username || info.pew === item.pew){
- commit('SET_USERNAME',item.username); //将username和role进行存储
- sessionStorage.setItem('USERNAME', item.username); //存入 session
- commit('SET_ROLE',item.role);
- sessionStorage.setItem('ROLE', item.role);
- return data={username:item.username,introduce:item.introduce};
- }else{
- return data;
- }
- });
- resolve(data);
- }).catch(error => {
- reject(error);
- });
- },
- Roles({ commit }, newrouter){
- return new Promise((resolve, reject) => {
- commit('SET_NEWROUER',newrouter); //存储最新路由
- resolve(newrouter);
- }).catch(error => {
- reject(error);
- });
- },
main.js
- router.beforeEach((to, from, next) = >{
- if (store.getters.role) { //判断role 是否存在
- if (store.getters.newrouter.length !== 0) {
- next() //resolve 钩子
- } else {
- let newrouter
- if (store.getters.role == 'A') { //判断权限
- newrouter = powerRouter
- } else {
- let newchildren = powerRouter[0].children.filter(route = >{
- if (route.meta) {
- if (route.meta.role == store.getters.role) {
- return true
- }
- return false
- } else {
- return true
- }
- });
- newrouter = powerRouter newrouter[0].children = newchildren
- }
- router.addRoutes(newrouter) //添加动态路由
- store.dispatch('Roles', newrouter).then(res = >{
- next({...to
- })
- }).
- catch(() = >{
- })
- }
- } else {
- if (['/login'].indexOf(to.path) !== -1) {
- next()
- } else {
- next('/login')
- }
- }
- })
components/index.vue
- // mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
- ...mapGetters([
- 'newrouter'
- ])
此项目拿去 捋清楚 vue+vuex+vue-router 的关系是没问题的,这可以说的超级简单的版本,适合初学。上面的内容说的重点,其实也算是项目的全部啦
项目地址: vue-simple-template
有什么问题欢迎提问~
来源: https://www.cnblogs.com/weven/p/8143518.html