vue-clic&ElementUI小項目(下) 路由守衛功能 修改用戶權限 shiro授權 axios攔截器自動添加token 全局 axios模塊 axios統一設置服務器請求路徑

一、添加講師

 

 

 

二、修改講師

 

 

 

三、用戶列表

 

 

 

四、添加用戶

 

 

 

五、修改用戶

 

 

 

 

六、首頁樹形導航

 

 

 

1、修改權限實體類

 

 

 

2、組合所需數據

  /**
     * 獲得指定用戶的資源菜單
     * @param request
     * @return
     */
    @GetMapping("/menu")
    public ResponseResult<Object> findPermsByUserName(HttpServletRequest request){
        //獲得請求頭中的token
        String token = request.getHeader("Authorization");
​
        //根據token獲得用戶名
        String username= JwtTokenUtils.getUserId(token);
​
        List<Perms> permsList=permsService.findPermsByUserName(username);
        if(permsList!=null && permsList.size()>0) {
            //保存父級菜單
            List<Perms> firstPerms = new ArrayList<>();
            for (Perms perms : permsList) {
                if (perms.getParentid() == null) {
                    //當前菜單是父級菜單，保存到父級集合中
                    firstPerms.add(perms);
               }
           }
​
            for (Perms first : firstPerms) {
                //獲得每個父節點的子節點
                List<Perms> childrenPerms= new ArrayList<>();
                for (Perms perms : permsList) {
                    if (first.getId() == perms.getParentid()) {
                       childrenPerms.add(perms);
                   }
               }
                first.setChildren(childrenPerms);
           }
            return new ResponseResult<Object>(firstPerms,200);
       }
        return new ResponseResult<>(500,"你沒有可用菜單，請聯系管理員");
   }

3、修改vue首頁

​ js部分

export default {
  name: "Home",
  data(){
    return{
      menuData:[]
   }
 },methods:{
    loadMenu(){
      let token=localStorage.getItem("token");
      axios.get("http://127.0.0.1:8088/perm/menu",
       {
          headers: {"Authorzation": token}
       })
       .then(result=>{
          if(result.data.code==200) {
           this.menuData=result.data.data;
         }else {
            this.$message({message:result.data.msg,type:'warning',duration:3000});
         }
       })
   }
 },created() {
    this.loadMenu();
 }
}

頁面部分

  <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#FFFF"
        active-text-color="#ffd04b"
        :router="true"><!-- :router="true"是否啟用路由模式，如果啟用，根據導航組件中的index屬性的值進行跳轉-->
        <el-submenu :index="item.id+''" v-for="item in menuData" :key="item.id+''">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="chil.link" v-for="chil in item.children" :key="chil.id">{{chil.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>

 

4、樹形菜單數據第一次不顯示問題

這個問題是因為異步加載 還沒有完成，但是界面已經完成了，所以要讓界面等待異步加載完成后再執行

 // $nextTick （） 當異步對話框 完全加載之后（在頁面完全被渲染之后，才執行nextTick里面的回調） 
      this.$nextTick(()=>{
        // this.$axios.get("url",{}).then(res=>{
           this.$refs.tree.setCheckedKeys([16,31]);//將選中數據更新到Tree
        // })
     });

<font color=blue>修改獲得用戶權限方法</font>

 

 

 

 

<font color=blue>修改權限列表對話框彈出方法</font>

 

 

 

 

 

七、路由守衛

vue-router 提供了能讓你在導航發生之前運行某些代碼的功能，並且遵照你的意願去取消導航，或將用戶導航到其它地方。

路由守衛最常見的使用場景就是『登錄』認證和『權限』認證

在路由對象router中，有一個方法beforeEach()

語法：
router.beforeEach((to, from, next) => {
 // ...
});
​
該守衛被傳入 3 各參數：to 、from 以及 next ：
Route to
   要跳轉到的目的地
Route from
   從哪一個地址來(從哪里來)
Function next
   回調函數，通過 next 回調函數你可以讓 vue-router 去處理導航、取消導航、重定向到其它地方或執行其它操作。
   一定要調用 next 方法。因為直到調用 next 方法之前，路由行為的狀態將一致處於等待狀態，永遠不會被解析（resolved）。
   如果next()沒有帶參數則表示放行url，如果next()中帶了參數則控制要跳轉到要過去的url

修改router.js

 

 

 

 

八、登出功能

<font color=red>前后端分離的項目中，只需要在前端將保存在瀏覽器中的token刪除就表示用戶退出了項目。</font>不需要在服務器端操作。

 

 

 

九、給用戶分配權限

 

 

 

1、遞歸獲得權限數據

 /**
     * 獲得所有權限
     * @return
     */
    @GetMapping("/all")
    public ResponseResult<Object> findRight(){
        List<Perms> permsList=permsService.findPerms();
        //保存一級節點
        List<Perms> rootNode=new ArrayList<>();
        //獲得一級節點
        for(Perms perms : permsList){
            if(perms.getParentid()==null){
                rootNode.add(perms);
           }
       }
​
        //根據一級節點找子節點
        for(Perms item:rootNode){
            item.setChildren(getChildrenNode(item.getId(),permsList));
       }
        return new ResponseResult<>(rootNode,200);
   }
​
    /**
     * 獲得一級節點的子節點
     * @return
     */
    public  List<Perms> getChildrenNode(Integer id,List<Perms> perms){
        List<Perms> childrenList=new ArrayList<>();
        for(Perms item:perms){
            if(item.getParentid()==id){
                childrenList.add(item);
           }
       }
        
        //獲得子元素的子對象
        for(Perms p:childrenList){
            p.setChildren(getChildrenNode(p.getId(),perms));
       }
​
        if(childrenList.size()==0){
            return null;
       }
        return childrenList;
   }

2、修改用戶權限

​ <font color=red>獲得用戶的新權限后，要先將用戶的原權限全部刪除，刪除后重新添加權限</font>

 

十、Shiro授權

​ 1、查詢登錄用戶所有的資 源權限

​ 2、修改shiro自定義Realm類

/**
 * 自定義realm，用來使用jwt做認證
 */
public class JwtRealm extends AuthorizingRealm {
    @Autowired
    private IPermsService permsService;
    
    /**
     * 授權
     * @param principalCollection
     * @return
     */
    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
      //獲得token
        String token=principalCollection.getPrimaryPrincipal().toString();
        //獲得用戶名
        String username=JwtTokenUtils.getUserId(token);
        //獲得資源權限
        Set<String> perms=permsService.findRightByUserName(username);
        SimpleAuthorizationInfo authorizationInfo=new SimpleAuthorizationInfo();
        authorizationInfo.setStringPermissions(perms);
        return authorizationInfo;
   }
}

3、修改controller

在controller方法上添加授權注解

 

 

 

十一、axios攔截器

我們每次對服務器發送請求都要將token手動發送，可以配置axios的攔截器，將請求進行攔截，然后將token添加到請求中，不用每次都將token帶過去。

1、配置axios攔截器實現token自動添加

<font color=blue>修改main.js</font>

//每次都要添加 token
axios.interceptors.request.use(
  function(config) {
    config.headers.Authorization = localStorage.getItem('token')
    return config
 },
  function(error) {
    // Do something with request error
    return Promise.reject(error)
 }
)

<font color=blue>將請求中的token代碼刪除</font>

 

 

 

2、解決每個組件中都要引入axios模塊

<font color=blue>修改main.js</font>

//axios的第二個問題：每個組件內部都要引入axios ，每個組件其實也是一個vue實例
Vue.prototype.$axios=axios

3、axios統一設置服務器請求路徑

<font color=blue>修改main.js</font>

// axios的第一個問題： 每次請求都要添加基准路徑
axios.defaults.baseURL = "http://localhost:8088/"

<font color=blue>修改發送請求的路徑</font>