vue-admin-template 动态路由的实现（方式二 推荐），成功跳槽百度工资从15K涨到28K

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

commit(‘SET_ROUTES’, accessedRoutes)

resolve(accessedRoutes)

})

}

}

export default {

namespaced: true,

state,

mutations,

actions

}

• 修改store/modulds/user.js

import { login, logout, getInfo } from ‘@/api/user’

import { getToken, setToken, removeToken } from ‘@/utils/auth’

import { resetRouter } from ‘@/router’

const getDefaultState = () => {

return {

token: getToken(),

name: ‘’,

avatar: ‘’,

roles: []

}

}

const state = getDefaultState()

const mutations = {

RESET_STATE: (state) => {

Object.assign(state, getDefaultState())

},

SET_TOKEN: (state, token) => {

state.token = token

},

SET_NAME: (state, name) => {

state.name = name

},

SET_AVATAR: (state, avatar) => {

state.avatar = avatar

},

SET_ROLES: (state, roles) => {

state.roles = roles

}

}

const actions = {

// user login

login({ commit }, userInfo) {

const { username, password } = userInfo

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

login({ username: username.trim(), password: password }).then(response => {

const { data } = response

commit(‘SET_TOKEN’, data.token)

setToken(data.token)

resolve()

}).catch(error => {

reject(error)

})

})

},

// get user info

getInfo({ commit, state }) {

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

getInfo(state.token).then(response => {

const { data } = response

if (!data) {

return reject(‘验证失败，请重新登录’)

}

const {roles, name, avatar } = data

commit(‘SET_ROLES’, roles)

commit(‘SET_NAME’, name)

commit(‘SET_AVATAR’, avatar)

resolve(data)

}).catch(error => {

reject(error)

})

})

},

// user logout

logout({ commit, state }) {

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

logout(state.token).then(() => {

removeToken() // must remove token first

resetRouter()

commit(‘RESET_STATE’)

commit(‘SET_ROLES’, [])

resolve()

}).catch(error => {

reject(error)

})

})

},

// remove token

resetToken({ commit }) {

return new Promise(resolve => {

removeToken() // must remove token first

commit(‘RESET_STATE’)

commit(‘SET_ROLES’, [])

resolve()

})

}

}

export default {

namespaced: true,

state,

mutations,

actions

}

添加roles: [] 保存权限列表 ，添加内容如下

const getDefaultState = () => {

return {

…

roles: []

}

}

const mutations = {

…

SET_ROLES: (state, roles) => {

state.roles = roles

}

}

// get user info

getInfo({ commit, state }) {

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

getInfo(state.token).then(response => {

…

const {roles, name, avatar } = data

commit(‘SET_ROLES’, roles)

…

}).catch(error => {

reject(error)

})

})

},

// user logout

logout({ commit, state }) {

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

logout(state.token).then(() => {

…

commit(‘SET_ROLES’, [])

…

}).catch(error => {

reject(error)

})

})

},

// remove token

resetToken({ commit }) {

return new Promise(resolve => {

…

commit(‘SET_ROLES’, [])

…

})

}

}

• 在store/getters.js中添加roles

const getters = {

sidebar: state => state.app.sidebar,

device: state => state.app.device,

token: state => state.user.token,

avatar: state => state.user.avatar,

name: state => state.user.name,

//添加roles

roles: state => state.user.roles,

//动态路由

permission_routes: state => state.permission.routes,

}

export default getters

• 将permission添加到store/index.js中

import Vue from ‘vue’

import Vuex from ‘vuex’

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件